.click() Affect Only One Element With Class

April 21, 2024 Post a Comment

I've got the list of news, with short and full text, and a title of the news article. Clicking on it expands full view and vise versa. Yet clicking on first article also expands al

Solution 1:

You need to act on only the items in the section you clicked. The code for that would be like:

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
        var par = $(this).parents('.main-news-holder');
        par.find(".news-content-short").toggle();
        par.find(".news-content-full").toggle();
        par.find('.news-date').toggleClass('active-date');
        par.find('.news-expand').toggleClass('active');
        returnfalse;
    });
});

Check this demo:http://jsbin.com/ikijap/1/edit

Solution 2:

You're problem is not that your click event is called based on class, but that in your click event you're acting on every item in the class.

Instead, use this

For more details on the click event, see JQuery's API

Solution 3:

This is because you are always working on all items of the set. So e.g. $(".news-content-short").toggle(); toggles all items with the according class and not only the one you want.

The following should work:

$('.news-expand').click(function() {
      $parent = $(this).parents(".main-news-holder");
      $parent.find(".news-content-short,.news-content-short").toggle().end()
             .find('.news-date').toggleClass('active-date').end()
             .find('.news-expand').toggleClass('active');
});

Your example working

Solution 4:

You will need to get to the parent div and after that you can hide/show the correct divs. Check the jsbin demo here: http://jsbin.com/irihax/14/

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
          var mainDiv = $(this).parent().parent().parent();
        mainDiv.find(".news-content-short").toggle();
        mainDiv.find(".news-content-full").toggle();
        mainDiv.find('.news-date').toggleClass('active-date');
        mainDiv.find('.news-expand').toggleClass('active');
    });

});

Solution 5:

By rearrange the html code,

<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery-1.7.2.min.js"></script><metacharset=utf-8 /><title>JS Bin</title><script>
$(document)
    .ready(function () {
    $('.news-header')
        .click(function () {
        $(this).children('div').toggle();
    });
});
        </script></head><body><divid="main-news"><divclass="main-news-holder"><divclass="news-date"><p>1 sep</p></div><divclass="news-header"style="border:1px solid;"><p><aclass="news-expand"href="#">Show more</a></p><divclass="news-content-short"><p>short short short short short</p></div><divclass="news-content-full"style="display: none;"><p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p></div></div></div><!-- ################################################################################################################################
            --><divclass="main-news-holder"><divclass="news-date"><p>2 sep</p></div><divclass="news-header"><p><aclass="news-expand"href="#">Show more</a></p><divclass="news-content-short"><p>short short short short short</p></div><divclass="news-content-full"style="display: none;"><p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p></div></div></div></body></html>

Hope this will help.

Code Html5