1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:03 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Another toggle div question!

         

greencode

3:16 pm on Aug 20, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



I've knocked up a very rough page of what I'm trying to achieve. Currently clicking on the "trigger" div acts as a toggle to show and hide the then the next "toggle-container".

But what I would like to do is only for the "link" div to act as the trigger to show and hide the "toggle-container"

I'm sure this is pretty straightforward but it's been a long day and I'm lost!

Any ideas or help would be greatly appreciated. 


<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <style type="text/css">
 body {
 font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 }
 
 .block {
 float: left;
 width: 300px;
 }
 
 .link {
 position: absolute;
 top: 0;
 right: 0;
 }
 
 .details {
 float: left;
 width: 100%;
 color: #999;
 font-size: 12px;
 margin-top: 3px;
 }
 
 .label {
 float: left;
 }
 
 .hilite {
 background: #f5f5f5;
 }
 
 .block {
 border: 1px solid #333;
 margin-bottom: 10px;
 padding: 5px;
 }
 
 .ttl-ctn {
 position: relative;
 }
 
 .toggle-container {
 padding-top: 10px;
 float: left;
 width: 100%;
 }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
  $(".toggle-container").hide();
  $(".trigger").click(function(){
    $('.live').not(this).toggleClass('live').closest().next('.toggle-container').toggle();
    $(this).toggleClass('live').next().toggle();
  });
});
</script>
<div class="block">
<div class="ttl-ctn trigger">
<div class="label">Question 1</div>
<div class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt enim ac ligula aliquet cursus. Morbi facilisis erat in tristique imperdiet. Fusce sit amet nisl vitae ligula malesuada fringilla in at lectus.</div>
<div class="link">See Answer</div>
</div>
<div class="cf toggle-container">
Answer 2
</div>
</div>
<div class="block hilite">
<div class="ttl-ctn trigger">
<div class="label">Question 2</div>
<div class="link">See Answer</div>
</div>
<div class="cf toggle-container">
Answer 2
</div>
</div>
<div class="block">
<div class="ttl-ctn trigger">
<div class="label">Question 2</div>
<div class="link">See Answer</div>
</div>
<div class="cf toggle-container">
Answer 3
</div>
</div>
</body>
</html>

Fotiman

5:14 pm on Aug 20, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month 




$(document).ready(function() {
  $(".toggle-container").hide();
  $(".link").click(function(){
    $(this).parent().next('.toggle-container').toggle();
  });
});

Instead of this: 

$(document).ready(function() {
$(".toggle-container").hide();
$(".trigger").click(function(){
$('.live').not(this).toggleClass('live').closest().next('.toggle-container').toggle();
$(this).toggleClass('live').next().toggle();
});
});


Note, I don't know what that code is trying to do with the "live" class, but nothing in your example seems to be using it so I got rid of it.

greencode

6:52 pm on Aug 20, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for this, really appreciated. Is there also any way to add a class of "selected" to the "block" div when you're toggling with the "link" div? That way I could style those divs that are currently toggled.

Fotiman

7:53 pm on Aug 20, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month 




$(document).ready(function() {
  $(".toggle-container").hide();
  $(".link").click(function(){
    $(this).parent().next('.toggle-container').toggle().parent().toggleClass('selected');
  });
});

greencode

7:53 am on Aug 21, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



That is amazing. Thanks so much for your help with this.

Fotiman

1:17 pm on Aug 21, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Glad to help.:)

greencode

12:56 pm on Aug 25, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi. Me again! Sorry to revisit this question but is there any way to swap the "details" div for the "toggle-container" div upon clicking "link". The thing is this would only be the case where the "details" div exists i.e. in the first block in the example code above. In all other situations (where the "details" div didn't exist) then I would require the same functionality as you've currently provided the answer to.

Fotiman

1:56 pm on Aug 25, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



This would will toggle the "details" if it exists, and the "toggle-container" if details doesn't exist. Is that the behavior you want though? Do you want it to toggle both the details and the toggle-container? 

$(document).ready(function() {
 $(".toggle-container").hide();
 $(".link").click(function(){
  var $toggleEl = $(this).siblings('.details');
  if (!$toggleEl.length) {
   $toggleEl = $(this).parent().next('.toggle-container');
  }
  $toggleEl.toggle().parent().toggleClass('selected');
 });
});

greencode

2:11 pm on Aug 25, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Apologies. What I meant is that if the "details" div exists then when I click the link it would replace the "details" div with the "toggle-container" div. Then when clicking the link again it would take it back to it's original state i.e. showing the "details" div.

Fotiman

2:20 pm on Aug 25, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In that case: 

$(document).ready(function() {
  $(".toggle-container").hide();
  $(".link").click(function(){
    $(this).siblings('.details').toggle();
    $(this).parent().next('.toggle-container').toggle().parent().toggleClass('selected');
  });
});

greencode

2:37 pm on Aug 25, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for this. Where I get really confused is when I then change the order or things. For example in this version:

<div class="block">
<div class="ttl-ctn">
<div class="label">Question 1</div>
<div class="link">See Answer</div>
</div>
<div class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt enim ac ligula aliquet cursus. Morbi facilisis erat in tristique imperdiet. Fusce sit amet nisl vitae ligula malesuada fringilla in at lectus.
</div>
<div class="cf toggle-container">
Answer 1
</div>
</div>

I have moved "details" outside of the "ttl-ctn" and then I also need the "ttl-ctn" to be the clickable link instead of the "link".

Fotiman

2:49 pm on Aug 25, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The code I posted was assuming the following "tree": 


.block
  .ttl-ctn .trigger
    .label
    .details
    .link
  .cf .toggle-container


If you're not using a consistent hierarchy, then my approach won't work (and you'll be adding a lot of work for yourself). Try to keep your code as modular as possible.

If you're moving where the toggle-container lives, you'll need to modify how jQuery finds it as well.

greencode

2:52 pm on Aug 25, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for this. As I now need "ttl-ctn" to be the link and not the "link" looks like I'll have to play around with your code until I get it working.

Fotiman

2:57 pm on Aug 25, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Specifically, if you've moved the .toggle-container to be a sibling of .link, then this: 

$(this).parent().next('.toggle-container').toggle().parent().toggleClass('selected');

would be changed to: 

$(this).siblings('.toggle-container').toggle().parent().parent().toggleClass('selected');

Fotiman

3:00 pm on Aug 25, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Note, I replied before I saw your last comment above.

greencode

3:07 pm on Aug 25, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for all your help with this. Really is very much appreciated.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:03 pm May 13, 2026