www.webdeveloper.com
Results 1 to 9 of 9

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,126
    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

  5. #5
    Join Date
    Aug 2014
    Posts
    4
    Quote Originally Posted by cbVision View Post
    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">
    			//<=!=[=C=D=A=T=A=[  
    			$(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>
    Hi, how to use slideUp automatically after page is loaded? Div with <p> must be hidden on start.

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    The code has been modified to hide them on load:
    http://codepen.io/anon/pen/stldx
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Please note that we do have a forum specifically for JQuery in the Javascript Frameworks forum.
    Last edited by jedaisoul; 08-28-2014 at 04:04 PM. Reason: *** thread moved by moderator ***
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Aug 2014
    Posts
    4
    Quote Originally Posted by cbVision View Post
    The code has been modified to hide them on load:
    http://codepen.io/anon/pen/stldx
    Thanks a lot!

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    Quote Originally Posted by \\.\ View Post
    Please note that we do have a forum specifically for JQuery in the Javascript Frameworks forum.
    This topic is from 4 years ago ... lol. Maybe that forum didn't exist?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

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