www.webdeveloper.com
Results 1 to 4 of 4

Thread: jQuery box collapser

  1. #1
    Join Date
    May 2009
    Location
    UK
    Posts
    39

    jQuery box collapser

    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"?
    Last edited by miocene; 10-01-2010 at 02:23 PM.

  2. #2
    Join Date
    May 2009
    Location
    UK
    Posts
    39
    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.

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,105
    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>

  4. #4
    Join Date
    May 2009
    Location
    UK
    Posts
    39
    nice, works a charm, thanks.

    Learning quickly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles