Unhide multiple elements with onclick event

Question

I have code working on my site that when someone clicks the content of a row in a table, more content appears. That works fine:

$(document).ready(function() {
    //hide the all of the element with class abstract
    $("..meetings-list .meeting_title_and_description .abstract").hide();
    //toggle the componenet with class meetingname
    $("..meetings-list .meeting_title_and_description .meeting_name").click(function(){
        $(this).next(".meetings-list .meeting_title_and_description .abstract").slideToggle(50);
     });
});

However, now i want to make a second element to appear as well on the same onclick event. I can't figure out how to code that. I tried something like this, but it didn't work

$(document).ready(function(){
    //hide the all of the element with class abstract
    $("..meetings-list .meeting_title_and_description .abstract").$("..meetings-list .meeting_title_and_description .secondthingtohide").hide();
    //toggle the componenet with class meetingname
    $("..meetings-list .meeting_title_and_description .meeting_name").click(function(){
    $(this).next(".meetings-list .meeting_title_and_description        .    abstract").$("..meetings-list .meeting_title_and_description .abstract").$("..meetings-list .meeting_title_and_description .secondthingtohide").slideToggle(50);
     });
});

Anybody an idea?

Answer 1

Try using wildcard selector approach for this one, such as this:

$("[.^=meeting]").toggle();
 // OR //
$("[class^=meeting]").hide();

[class^=meeting] or [.^=meeting] tells jQuery to select all tags with the class starting with 'meeting', and toggle them all with whichever function you want (ie show(), hide(), fadeIn(), fadeOut(), and such).

$("[.$=meeting]").show();
 // OR //
$("[class$=meeting]").fadeOut();

[class$=meeting] or [.$=meeting] tells jquery to select all tags with the class ending with 'meeting', and toggle them all with whichever function you want (ie show(), hide(), fadeIn(), fadeOut(), and such).