Question

I have a show/hide script in place that I want to extend but curious as to the easiest way to extend it’s functionality.

At present you can click on a main link and it opens up the corresponding div with further links inside that.

http://jsfiddle.net/nX8mr/

I would like to extend it so that each list item has a div/image (I’ve included an image just for the example) that is hidden until clicked but will always appear in the same position on the right. So the functionality is more like…

1) Click a Main Link
2) Open Up respective Div with further links
3) Show First List Items div/image
4) On click of any other link in Div then show that List Items div/image instead and hide previous

Not sure if to try and include another show/hide for the individual list div/image or not?

Any help/suggestions would be appreciated.

Update

It seems replicating the show/hide seems easiest. This did it in the end…

$('[class^=showHide], [class^=showHide] img').hide();

$('[class^=link]').click(function() {
    var x =  $(this).attr("className");
    var $item = $('.showHide-' + x);
    if (!$item.is(":visible")) $('[class^=showHide]').hide();
    $('.showHide-' + x).slideToggle();
    return false;
    });

$('[class^=showHide] li').click(function() {
    var x =  $(this);
    if (!$(x).find('img').is(":visible")) $('[class^=showHide] li img').hide();
    $(x).find('img').slideToggle();
    return false;
    });

Answer 1

Not sure if to try and include another show/hide for the individual list div/image or not?

That’s what I would do. You can just replicate what you’re doing to show/hide the links, doing to to the images as well.