Jquery how to toggle a text change on anther div

When clicking on the bottom link of the accordian I would to change the text on the top link.

Currently the text on the top link only changes when the top link is clicked.

below 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';

    // initialise the visibility check
    var is_visible = false;

    // append show/hide links to the element directly preced开发者_如何学Cing the element with a class of "toggle"
    $('.collapseLink').append('<span class="dottedBot">' + showText + '</span>');

    // hide all of the elements with a class of 'toggle'
    $('.revealBoxContents').show();

    // capture clicks on the toggle links
    $('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');
    });
});

And here is the URL

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

Would love to know how to do this.

Thanks,

Sat

Just select all the "sibling" a.collapseLink elements in your click handler:

$(this).parents('div.revealBoxContents').find('a.collapseLink')

Here this is the link that was clicked. Now you can do whatever you want with all the links as a group (instead of just one at a time).

EDIT: more details

So, first of all, you need to change your is_visible variable to only apply to the current link, right now one box would affect the others. So you'd need:

var is_visible = $(this).parents('div.revealBoxContents').is(':visible');

And now instead of:

$(this).html((!is_visible) ? showText : hideText);

You would write:

$(this).parents('div.revealBoxContents').find('a.collapseLink').html((!is_visible) ? showText : hideText);

I need to see the tags in your page to give you a handholding exercise. The basics are this:

1. Set up a function that facillitates the change - looks like you have the basics here
2. Call this function from the item you need to set off the change
3. Find the element (by ID is easiest) that has to be changed

The actual line that changes the text will look something like this:

 $("#idForItemToChange").html("You sunk my battleship!");

Basic JavaScript: Function fired from control, item to change is found, text is changed.