How to make a JavaScript class toggle persistent

Question

    var main = function() {
    $('.article').click(function() {
        if($(this).hasClass('current')) {
                $(this).children('.description').toggle("slow");
        }
        else {
                $('.article').removeClass('current');
                $('.description').hide();
                $(this).addClass('current');
                $(this).children('.description').toggle("slow");
        };
 });
}
$(document).ready(main);

Hello, I would like to know how to learn how to do a few things with my little on-click toggle list:

Im having a hard time on how to make this toggle list to remain persistent after a user clicks on an already opened article. Right now the way I have it setup the current article will toggle whenever clicked on, I would like it to remain open and to only close when clicked on the heading itself (opposed to anywhere in the item).

Also
+ How to create an open/close all toggle link
+ continuity visual cues that shows list is expandable and if it is either open or closed that will fit this style

A toggle toggles - that's what it is for. For persistence, you want addClass/removeClass, not toggle. — Diodeus - James MacFarlane, Sep 25 '14 at 17:46
Then attaching the toggle handler to the `.article` class probably isn't what you want, if you want close-toggling to be handled differently. — Dave Newton, Sep 25 '14 at 18:08
Thanks for the input! Im still not sure why I got negative points for asking a legit question tho.. — b__, Sep 25 '14 at 19:01

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

If you do not want a click on a child item to cause closure of your main heading, you need to stop the event propagation.

Please check for full syntax/usage: How to stop event bubbling on checkbox click

Usage:

event.stopPropagation()

edited May 23 '17 at 12:23

Community

1
1

answered Sep 25 '14 at 18:43

Christopher Robot

301
1
8

score 1 · Accepted Answer · answered Sep 25 '14 at 18:47

You need to target the .article .item and not the .article

var main = function() {
    $('.article .item').click(function() {
        var article = $(this).closest('.article');
        if(article.hasClass('current')) {
                article.children('.description').toggle("slow");
        }
        else {
                $('.article').removeClass('current');
                $('.description').hide();
                article.addClass('current');
                article.children('.description').toggle("slow");
        };
   });
}

Demo at http://jsfiddle.net/kL70z8ky/5/

Thank you! Great simple solution, now I understand my mistake — b__, Sep 25 '14 at 19:08

score 1 · Answer 3 · answered Sep 25 '14 at 19:39

1

Here a nother aproach:

$('.article').click(function () {
    $(".article").not($(this).addClass('current')).removeClass('current');
    $('.description').not($('.description',this).slideDown()).slideUp();
});

answered Sep 25 '14 at 19:39

Steven Web

1,966
13
23

How to make a JavaScript class toggle persistent

3 Answers3