CODEWITHSUNDEEP
jquery
sat
sat

Reputation: 1009

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 preceding 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

Upvotes: 0

Views: 400

Answers (2)

Milimetric
Milimetric

Reputation: 13549

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);

Upvotes: 1

Gregory A Beamer
Gregory A Beamer

Reputation: 17010

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.

Upvotes: 0

Related Questions