Question

when I click the link hide information link it shows Show information but it also changes the text on all the other boxes on the page, also when I click hide information it toggles the class test on the div class=”revealBox” but it does it on all of the boxes, I would like to just keep it to the relevant box.

I know it will be something to do with $(this) I just don’t know how to implement it.

here is my jquery

$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Hide Information';
var hideText='Show Information';
var is_visible = false;
$('.collapseLink').append('<span class="dottedBot">'+showText+'</span>');
$('.revealBoxContents').show();
$('a.collapseLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.revealBoxContents').slideToggle('slow');
// return false so any link destination is not followed
return false;
});
// toggle the bottom link
$('.collapseLink').click(function(){
     $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');    
     $(".collapseLink").html( (!is_visible) ? showText : hideText);
    $(this).parent('.item').toggleClass('current');

}); 

$(".revealBoxTop a").click(function(){
        $(this).toggleClass("closed").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

    $('.revealBox a').click(function() {
        $(".revealBox").toggleClass("test");
    });


});

and here is the url

http://satbulsara.com/NSJ-local/eqs1.htm

Answer 1

EDIT

Okay I’ve taken another stab at it – changed lots with no testing! Please replace your code with the code below and advise. if this does’t work it might be a good idea to set up a demo at http://www.jsbin.com or http://www.jsfiddle.net

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Hide Information',
    hideText='Show Information';

$('.collapseLink').append('<span class="dottedBot">'+showText+'</span>');
$('.revealBoxContents').show();

// toggle the bottom link
$('.revealBox .collapseLink').click(function(e){
         e.preventDefault();
         var $targetContainer = $(this).parents('.revealBox').find('revealBoxContents');
         $targetContainer.stop(true, true).slideToggle('slow');
         if ($targetContainer.is(:visible) {
             $(this).html(showText);
         else {
             $(this).html(hideText);
         }
         // this line below doesn't do anything - can't find an element .item
         $(this).parent('.item').toggleClass('current');
}); 

$('.revealBox a').click(function() {
    // ONLY TARGET PARENT REVEAL BOX
    $(this).parents(".revealBox").toggleClass("test");
});

Hopefully we are getting closer!

EDIT 3

Went ahead and made a mock-up using your example html:
http://jsbin.com/iceyi3/edit
edit: modified version: http://jsbin.com/iceyi3/2/edit

I found a number of careless errors in my code from above – so I apologise for that! The duplication of ‘hide text’/’show text’ is because in some areas these are present within html as well as being added by the javascript.