jQuery toggle between same classes

Question

I have 4 items which should be toggle-able. So when an item is visible, and I click on another item, the one I clicked should open. The other one should close.

Any suggestions on how I could do that?

I've tried to add this to my jQuery file, but nothing want to toggle then...

var sliderContent = $(this).next('.groupf-more');
        $('.groupf-more').not(sliderContent).hide();
        sliderContent.toggle();

Here is my jQuery:

jQuery(document).ready(function($) {

$('.groupf-more').hide();
$('.groupf-title').toggle(function() {

    $(this).closest('li').find('.groupf-more').slideDown();
    $(this, '.toggle-item').removeClass('groupf-title');
    $(this, '.toggle-item').addClass('groupf-title-active');

    return false;

},
function() {

    $(this).closest('li').find('.groupf-more').slideUp();
    $(this, '.toggle-item').removeClass('groupf-title-active');
    $(this, '.toggle-item').addClass('groupf-title');

    return false;

});
});

Here is my HTML:

<ul class="toggle" style="margin-right: 1%">
    <li class="toggle-item">
        <div class="groupf-title">Title</div>
        <div class="groupf-more">Content</div>
    </li>
    <li class="toggle-item">
        <div class="groupf-title">Title</div>
        <div class="groupf-more">Content</div>
    </li>
</ul>

What version of jQuery are you using? The two-function form of `.toggle` was removed in jQuery 1.9. — Barmar, Nov 20 '14 at 08:59
you could work with an active class (which you are already doing - but don't remove groupf-title, just add active as a second class). when clicking on an item you give it the active class. then you cycle through all of your items and close all which don't have the active class. — Andi, Nov 20 '14 at 08:59
@barmar: Above 1.9 i think... jQuery is not my thing, I've been testing around. Everything worked with that script, except the toggle between the divs. Thanks for replies so far! — Jeroen Bellemans, Nov 20 '14 at 09:07
See http://stackoverflow.com/questions/14490957/what-is-alternative-to-use-after-jquery-1-9-removed-togglefunction-function — Barmar, Nov 20 '14 at 09:09

score 0 · Answer 1 · answered Nov 20 '14 at 09:00

0

This should work:

$('.groupf-more').hide();
$('.groupf-title').click(function() {

    $('.groupf-more').slideUp();
    $(this).closest('li').find('.groupf-more').slideDown();

    return false;

});

answered Nov 20 '14 at 09:00

Anubhav

7,138
5
21
33

score 0 · Accepted Answer · answered Nov 20 '14 at 09:07

You can use

jQuery(document).ready(function($) {

  var $mores = $('.groupf-more').hide();
  var $items = $('.toggle-item');

  var $titles = $('.groupf-title').click(function() {
    var $more = $(this).next('.groupf-more').slideToggle();
    $mores.not($more).slideUp();
    var $title = $(this).toggleClass('groupf-title groupf-title-active');
    $titles.not($title).removeClass('groupf-title-active').addClass('groupf-title')
    return false;
  });
});

.groupf-title {
  color: red;
}
.groupf-title-active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="toggle" style="margin-right: 1%">
  <li class="toggle-item">
    <div class="groupf-title">Title</div>
    <div class="groupf-more">Content</div>
  </li>
  <li class="toggle-item">
    <div class="groupf-title">Title</div>
    <div class="groupf-more">Content</div>
  </li>
</ul>

Although, my classes are wrong, this toggle works! Thanks! :) — Jeroen Bellemans, Nov 20 '14 at 09:10

jQuery toggle between same classes

2 Answers2