jQuery box collapser

**miocene** · 10-01-2010, 02:18 PM

OK let's start with the code:

HTML Code:

<div id="content">
        <div class="openbox">
            <h2>Intro</h2>
            <div>
                <p>Here is an openbox, it should open/close nicely </p>
            </div>
        </div>
        <div class="openbox">
            <h2>Intro</h2>
            <div>
                <ul>
                    <li>Football </li>
                    <li>Tennis </li>
                    <li>Rugby </li>
                </ul>
            </div>
        </div>
    </div>

CSS:

Code:

.openbox{
	cursor:pointer;
	width:200px;
}
.open {
	background-color: green;
}
.closed {
	background-color: red;
}
.closed div{
	display:none;
}

Javascript:

HTML Code:

<script type="text/javascript">
$(".openbox").addClass("open");
	
	$(".openbox h2").click(function() {
	
	var openbox = this.parentNode;

		if($(openbox).hasClass("open"))
			{
			
			$(openbox).removeClass("open");
			$(openbox).addClass("closed");

			} else {
			
			$(openbox).removeClass("closed");
			$(openbox).addClass("open");
	
			}
		});
</script>

The above code works like a charm, but I would like to use the effects available in jQuery to animate the opening/closing. Is it a case of using the animate() function? I understand the function but how do I select the "div" within the "this" selector. If I do:

Code:

$(".openbox div").animate({height: 0}, 600)

then it applies the closing to both divs. I just want one of the divs to collapse, depending of which h2 I clicked on.

Edit: the "height" attribute won't actually succeed in properly hiding the div. Can one use something like "display: none"?

**miocene** · 10-01-2010, 02:31 PM

ok I've discovered the .slideup() and .show() functions. They do the hiding and showing nicely, but I can't get the selection right. It always selects both.

**cbVision** · 10-01-2010, 03:52 PM

Try this guy:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Title</title>
		<meta name="language" content="en" />  
		<meta name="description" content="" />  
		<meta name="keywords" content="" />
		<style type="text/css">
			.openbox * {margin: 0; padding: 0;}
			.openbox {background: #0f0; margin-bottom: 20px;}
			.active {background: #f00;}
			h2 {text-decoration: underline; cursor: pointer; color: #00f;}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
			//<![CDATA[  
			$(document).ready(function(){
				$('h2').click(function(){
					
					// gets the parent div
					var parent = $(this).parents('.openbox');
					
					// checks if it's active
					var active = $(parent).hasClass('active');
					
					// if it's active, it slides the div down, otherwise it slides it up
					if(active == true){
						$(this).next().slideDown('slow');
						$(parent).removeClass('active');
					} else {
						$(this).next().slideUp('slow');
						$(parent).addClass('active');
					};					
				});
			});
			//]]> 
		</script>
	</head>
	<body>
		<div id="content">
			<div class="openbox">
				<h2>Intro</h2>
				<div>
					<p>Here is an openbox, it should open/close nicely </p>
				</div>
			</div>
			<div class="openbox">
				<h2>Intro</h2>
				<div>
					<ul>
						<li>Football </li>
						<li>Tennis </li>
						<li>Rugby </li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

**miocene** · 10-01-2010, 05:14 PM

nice, works a charm, thanks.

Learning quickly

Thread: jQuery box collapser

Thread Tools

Display

jQuery box collapser

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions