SitePoint.com

swollenpickles · Nov 1, 2009, 20:06

Can anyone point me in the direction of a good beginners tutorial on how to use jquery to toggle (collapse and expand) divs? I've looked at a couple I found on google but haven't had success in getting them to work.

The sort of thing I'm trying to do is like Option 1 here. I've tried following this but can't seem to get it to work.

rajug · Nov 2, 2009, 04:44

How about this one?
http://docs.jquery.com/Effects/toggle

swollenpickles · Nov 2, 2009, 19:12

Thanks, I've tried using something like that example. The button appears on my page but when I click it nothing happens. Here's an example of the code I'm trying to use:

Code:

<button>CLICK HERE</button>

<div class="demo-show" style="display: none">

<p>All content I want to be revealed when user clicks the button goes here.</p>

</div>

Here's the javascript (which is in it's own file toggle.js and called via the method at the bottom here):

Code:

  $(document).ready(function(){
    
    $("button").click(function () {
      $("div").toggle();
    });

  });

Here's how I'm calling the scripts (in the header of a wordpress theme):

Code:

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/toggle.js" type="text/javascript"></script>

Any ideas on what I'm screwing up?

swollenpickles · Nov 2, 2009, 19:31

Ok, this is what is confusing me. The code below seems to work. But when I try and implement it into the wordpress theme, clicking the button makes everything disappear besides the background??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("button").click(function () {
      $("div").toggle();
    });

  });
</script>
</head>
<body>


<button>CLICK HERE</button>

<div class="demo-show" style="display: none">

<p>All content I want to be revealed when user clicks the button goes here.</p>

</div>
</body>
</html>

Ripe · Nov 3, 2009, 07:00

Quote:

Originally Posted by swollenpickles

Ok, this is what is confusing me. The code below seems to work. But when I try and implement it into the wordpress theme, clicking the button makes everything disappear besides the background??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("button").click(function () {
      $("div").toggle();
    });

  });
</script>
</head>
<body>


<button>CLICK HERE</button>

<div class="demo-show" style="display: none">

<p>All content I want to be revealed when user clicks the button goes here.</p>

</div>
</body>
</html>

Code:

$("div")

That there is toggling every div on the page.

Try:

Code:

$(".demo-show")

swollenpickles · Nov 3, 2009, 17:08

Quote:

Originally Posted by Ripe

Code:

$("div")

That there is toggling every div on the page.

Try:

Code:

$(".demo-show")

Thanks for that, it solved my problem!

How would I implement this if I wanted 2 buttons on the one page? When you open the page both divs would be hidden. Clicking button A would expand div A. Clicking button B would expand div B. If you click button A and then button B, div A would close and div B would expand. Does that make sense?

jef2904 · Nov 4, 2009, 11:29

Instead of using the .toggle() function use .show() and .hide() so it would look like this

JavaScript Code:

$(function () {
 $("#button1").click(function() {
  $(".demo-show").show();
 });
 $("#button2").click(function () {
  $(".demo-show").hide();
 }
});

That would make one button show it and the other hide it.

swollenpickles · Nov 4, 2009, 22:27

So would I still use that method with two buttons like my attempt below? I can't get this one working

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
$(function () {
 $("#button1").click(function() {
  $(".demo-show").show();
 });
 $("#button2").click(function () {
  $(".demo-show").hide();
 }
});
</script>
</head>
<body>


<button id="button1">CLICK HERE SECTION ONE</button>

<div class="demo-show" style="display: none">

<h1>SECTION ONE</h1>

<p>All content from SECTION ONE I want to be revealed when user clicks the button goes here.</p>

<p>If section one is open and the user clicks button two, then section one should collapse and section two should expand.</p>

</div>
<br />
<button id="button2">CLICK HERE SECTION TWO</button>

<div class="demo-show" style="display: none">

<h1>SECTION TWO</h1>

<p>All content from SECTION TWO I want to be revealed when user clicks the button goes here.</p>

<p>If section two is open and the user clicks button one, then section two should collapse and section one should expand.</p>

</div>

</body>
</html>

ralph.m · Nov 5, 2009, 02:14

I'm not great with jQuery, but it sounds like you want something like this:

Code:

<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $("div").toggle();
    });

    $("#button2").click(function () {
      $("div").toggle();
    });

  });
</script>

Worth a shot, anyhow.

swollenpickles · Nov 5, 2009, 19:42

Quote:

Originally Posted by ralph.m

I'm not great with jQuery, but it sounds like you want something like this:

Code:

<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $("div").toggle();
    });

    $("#button2").click(function () {
      $("div").toggle();
    });

  });
</script>

Worth a shot, anyhow.

Gave that a shot and it seems to just toggle both divs whenever either button is clicked.

I tried the code below and it was close, although the first div doesnt close when the second div is open. I'm guessing it may need an if/else type statement to say if button 2 is clicked and div 1 is open then close div 1 and open div 2?

ralph.m · Nov 5, 2009, 19:56

Silly me; I didn't mean to leave those lines as $("div").toggle();

Perhaps this would work better:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $(".show1").toggle();
    });

    $("#button2").click(function () {
      $(".show2").toggle();
    });

  });
</script>
</head>
<body>


<button id="button1">CLICK HERE SECTION ONE</button>

<div class="show1" style="display: none">

<h1>SECTION ONE</h1>

<p>All content from SECTION ONE I want to be revealed when user clicks the button goes here.</p>

<p>If section one is open and the user clicks button two, then section one should collapse and section two should expand.</p>

</div>
<br />
<button id="button2">CLICK HERE SECTION TWO</button>

<div class="show2" style="display: none">

<h1>SECTION TWO</h1>

<p>All content from SECTION TWO I want to be revealed when user clicks the button goes here.</p>

<p>If section two is open and the user clicks button one, then section two should collapse and section one should expand.</p>

</div>

</body>
</html>

swollenpickles · Nov 5, 2009, 22:35

Thanks, I'd tried something similar as well but it doesn't quite do what I'm after. If I've already clicked button 1 and then click button 2, it should close div 1 and open div 2.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $(".demo-show1").toggle();
    });

    $("#button2").click(function () {
      $(".demo-show2").toggle();
    });

  });

</script>
</head>
<body>


<button id="button1">CLICK HERE SECTION ONE</button>

<div class="demo-show1" style="display: none">

<h1>SECTION ONE</h1>

<p>All content from SECTION ONE I want to be revealed when user clicks the button goes here.</p>

<p>If section one is open and the user clicks button two, then section one should collapse and section two should expand.</p>

</div>
<br />
<button id="button2">CLICK HERE SECTION TWO</button>

<div class="demo-show2" style="display: none">

<h1>SECTION TWO</h1>

<p>All content from SECTION TWO I want to be revealed when user clicks the button goes here.</p>

<p>If section two is open and the user clicks button one, then section two should collapse and section one should expand.</p>

</div>

</body>
</html>

semantic7 · Nov 5, 2009, 23:40

Try this...

Code:

<script>
$(document).ready(function(){
    $("#button1, #button2").click(function () {
      $(".demo-show1").toggle();
      $(".demo-show2").toggle();
    });
});

</script>

varul · Nov 6, 2009, 01:28

Quote:

Originally Posted by swollenpickles

Can anyone point me in the direction of a good beginners tutorial on how to use jquery to toggle (collapse and expand) divs? I've looked at a couple I found on google but haven't had success in getting them to work.

The sort of thing I'm trying to do is like Option 1 here. I've tried following this but can't seem to get it to work.

The following JS code will help you to know about ""Expand & Collapse divs"

Code:

<html>
<head>

<script type="text/javascript">
var collapseDivs, collapseLinks;

function createDocumentStructure (tagName) {
  if (document.getElementsByTagName) {
    var elements = document.getElementsByTagName(tagName);
    collapseDivs = new Array(elements.length);
    collapseLinks = new Array(elements.length);
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var siblingContainer;
      if (document.createElement && 
          (siblingContainer = document.createElement('div')) &&
          siblingContainer.style) 
      {
        var nextSibling = element.nextSibling;
        element.parentNode.insertBefore(siblingContainer, nextSibling);
        var nextElement = elements[i + 1];
        while (nextSibling != nextElement && nextSibling != null) {
          var toMove = nextSibling;
          nextSibling = nextSibling.nextSibling;
          siblingContainer.appendChild(toMove);
        }
        siblingContainer.style.display = 'none';
        
        collapseDivs[i] = siblingContainer;
        
        createCollapseLink(element, siblingContainer, i);
      }
      else {
        // no dynamic creation of elements possible
        return;
      }
    }
    createCollapseExpandAll(elements[0]);
  }
}

function createCollapseLink (element, siblingContainer, index) {
  var span;
  if (document.createElement && (span = document.createElement('span'))) {
    span.appendChild(document.createTextNode(String.fromCharCode(160)));
    var link = document.createElement('a');
    link.collapseDiv = siblingContainer;
    link.href = '#';
    link.appendChild(document.createTextNode('expand'));
    link.onclick = collapseExpandLink;
    collapseLinks[index] = link;
    span.appendChild(link);
    element.appendChild(span);
  }
}

function collapseExpandLink (evt) {
  if (this.collapseDiv.style.display == '') {
    this.parentNode.parentNode.nextSibling.style.display = 'none';
    this.firstChild.nodeValue = 'expand';
  }
  else {
    this.parentNode.parentNode.nextSibling.style.display = '';
    this.firstChild.nodeValue = 'collapse';
  }

  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}

function createCollapseExpandAll (firstElement) {
  var div;
  if (document.createElement && (div = document.createElement('div'))) {
    var link = document.createElement('a');
    link.href = '#';
    link.appendChild(document.createTextNode('expand all'));
    link.onclick = expandAll;
    div.appendChild(link);
    div.appendChild(document.createTextNode(' '));
    link = document.createElement('a');
    link.href = '#';
    link.appendChild(document.createTextNode('collapse all'));
    link.onclick = collapseAll;
    div.appendChild(link);
    firstElement.parentNode.insertBefore(div, firstElement);
  }
}

function expandAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
    collapseDivs[i].style.display = '';
    collapseLinks[i].firstChild.nodeValue = 'collapse';
  }
  
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}

function collapseAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
    collapseDivs[i].style.display = 'none';
    collapseLinks[i].firstChild.nodeValue = 'expand';
  }
  
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}
</script>
<script type="text/javascript">
window.onload = function (evt) {
  createDocumentStructure('h1');
}
</script>
</head>


<body>
<center><h1>Hello</h1><p>How are you?</p>
<h1>Hi</h1><p>Have a nice Day</p>
<h1>Good Bye</h1><p>See you again</p></center>
</body>
</html>

varul · Nov 6, 2009, 02:44

sorry, forgot to add the below link for Jquery Expand & Collapse divs
The complete Jquery code is given @ http://ui2.jquery.com/demos/accordion/
where the step by step procedure have been followed to done it.

markbrown4 · Nov 6, 2009, 17:08

Quote:

Originally Posted by swollenpickles

Thanks, I'd tried something similar as well but it doesn't quite do what I'm after. If I've already clicked button 1 and then click button 2, it should close div 1 and open div 2.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $(".demo-show1").toggle();
    });

    $("#button2").click(function () {
      $(".demo-show2").toggle();
    });

  });

</script>
</head>
<body>


<button id="button1">CLICK HERE SECTION ONE</button>

<div class="demo-show1" style="display: none">

<h1>SECTION ONE</h1>

<p>All content from SECTION ONE I want to be revealed when user clicks the button goes here.</p>

<p>If section one is open and the user clicks button two, then section one should collapse and section two should expand.</p>

</div>
<br />
<button id="button2">CLICK HERE SECTION TWO</button>

<div class="demo-show2" style="display: none">

<h1>SECTION TWO</h1>

<p>All content from SECTION TWO I want to be revealed when user clicks the button goes here.</p>

<p>If section two is open and the user clicks button one, then section two should collapse and section one should expand.</p>

</div>

</body>
</html>

You keep changing the requirements

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>


<script>
  $(document).ready(function(){
    
    $("#button1").click(function () {
      $(".demo-show1").show();
      $(".demo-show2").hide();
    });
    $("#button2").click(function () {
    // If I've already clicked button 1 and then click button 2, it should close div 1 and open div 2
      $(".demo-show1").hide();
      $(".demo-show2").show();
    });

  });

</script>
</head>
<body>


<button id="button1">CLICK HERE SECTION ONE</button>

<div class="demo-show1" style="display: none">

<h1>SECTION ONE</h1>

<p>All content from SECTION ONE I want to be revealed when user clicks the button goes here.</p>

<p>If section one is open and the user clicks button two, then section one should collapse and section two should expand.</p>

</div>
<br />
<button id="button2">CLICK HERE SECTION TWO</button>

<div class="demo-show2" style="display: none">

<h1>SECTION TWO</h1>

<p>All content from SECTION TWO I want to be revealed when user clicks the button goes here.</p>

<p>If section two is open and the user clicks button one, then section two should collapse and section one should expand.</p>

</div>

</body>
</html>

Hope it helps,

swollenpickles · Nov 10, 2009, 17:55

Thank to everyone that responded. I've finally got it sorted!

shockyz · Nov 13, 2009, 06:19

nice!

Nov 1, 2009, 20:06	#1
swollenpickles SitePoint Enthusiast Join Date: Jul 2007 Posts: 86	jquery toggle help/advice Can anyone point me in the direction of a good beginners tutorial on how to use jquery to toggle (collapse and expand) divs? I've looked at a couple I found on google but haven't had success in getting them to work. The sort of thing I'm trying to do is like Option 1 here. I've tried following this but can't seem to get it to work.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 2, 2009, 04:44	#2
rajug Forever learner - PHP SOAP! Join Date: Oct 2006 Location: Kathmandu, Nepal Posts: 2,828	How about this one? http://docs.jquery.com/Effects/toggle

Nov 2, 2009, 19:12	#3
swollenpickles SitePoint Enthusiast Join Date: Jul 2007 Posts: 86	Thanks, I've tried using something like that example. The button appears on my page but when I click it nothing happens. Here's an example of the code I'm trying to use: Code: <button>CLICK HERE</button> <div class="demo-show" style="display: none"> <p>All content I want to be revealed when user clicks the button goes here.</p> </div> Here's the javascript (which is in it's own file toggle.js and called via the method at the bottom here): Code: $(document).ready(function(){ $("button").click(function () { $("div").toggle(); }); }); Here's how I'm calling the scripts (in the header of a wordpress theme): Code: <script src="/js/jquery.js" type="text/javascript"></script> <script src="/js/toggle.js" type="text/javascript"></script> Any ideas on what I'm screwing up?

Nov 4, 2009, 11:29	#7
jef2904 SitePoint Enthusiast Join Date: Aug 2008 Location: Florida Posts: 26	Instead of using the .toggle() function use .show() and .hide() so it would look like this JavaScript Code: $(function () { $("#button1").click(function() { $(".demo-show").show(); }); $("#button2").click(function () { $(".demo-show").hide(); } }); That would make one button show it and the other hide it.

Nov 5, 2009, 02:14	#9
ralph.m Aiming for best practice Join Date: Mar 2009 Location: Melbourne, Australia Posts: 1,035	I'm not great with jQuery, but it sounds like you want something like this: Code: <script> $(document).ready(function(){ $("#button1").click(function () { $("div").toggle(); }); $("#button2").click(function () { $("div").toggle(); }); }); </script> Worth a shot, anyhow.

Nov 5, 2009, 23:40	#13
semantic7 SitePoint Addict Join Date: Apr 2007 Posts: 234	Try this... Code: <script> $(document).ready(function(){ $("#button1, #button2").click(function () { $(".demo-show1").toggle(); $(".demo-show2").toggle(); }); }); </script>

Nov 6, 2009, 02:44	#15
varul SitePoint Enthusiast Join Date: May 2008 Posts: 34	sorry, forgot to add the below link for Jquery Expand & Collapse divs The complete Jquery code is given @ http://ui2.jquery.com/demos/accordion/ where the step by step procedure have been followed to done it.

Nov 10, 2009, 17:55	#17
swollenpickles SitePoint Enthusiast Join Date: Jul 2007 Posts: 86	Thank to everyone that responded. I've finally got it sorted!

Nov 13, 2009, 06:19	#18
shockyz SitePoint Member Join Date: Nov 2009 Posts: 6	nice!