jquery toggle help/advice

**swollenpickles** · Nov 1, 2009 21: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.

**Raju Gautam** · Nov 2, 2009 05:44

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

**swollenpickles** · Nov 2, 2009 20: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 20: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 08:00

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 18:08

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 12:29

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

Code JavaScript:

$(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 23: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 03: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 20:42

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 20: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 23: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 6, 2009 00:40

Try this...

Code:

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

</script>

**varul** · Nov 6, 2009 02:28

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 03: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 18:08

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 18:55

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

**shockyz** · Nov 13, 2009 07:19

nice!

User Tag List

Thread: jquery toggle help/advice

Thread Tools

Display

jquery toggle help/advice

Bookmarks

Bookmarks

Posting Permissions