Question

I would like to show multiple divs by clicking a respective link, which I believe I have already achieved – however, I would also like to create a link class which hides the div too.

I’m hoping someone can produce an amended version of the following script, so that it programs a link class to hide a div, using targets?

Here is the jsFiddle I’m working with: http://jsfiddle.net/XwN2L/1163/

HTML:

    <div class="buttons">
        <a  class="show" target="1">Option 1</a>
        <a  class="show" target="2">Option 2</a>
        <a  class="show" target="3">Option 3</a>
        <a  class="show" target="4">Option 4</a>
    </div>

    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>​

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#div' + $(this).attr('target')).show();
    });

Thank you in advance.

UPDATE:

http://jsfiddle.net/XwN2L/1180/

This seemed to work, sorry if I wasn’t clear enough in the question.

HTML:

    <div class="buttons">
        <a  class="show" target="1">Option 1</a>
        <a  class="show" target="2">Option 2</a>
        <a  class="show" target="3">Option 3</a>
        <a  class="show" target="4">Option 4</a>
        <a  class="hide" target="1">Close 1</a>
        <a  class="hide" target="2">Close 2</a>
        <a  class="hide" target="3">Close 3</a>
        <a  class="hide" target="4">Close 4</a>
    </div>

    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>​

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#div' + $(this).attr('target')).show();
    });

    $('.hide').click(function () {
        $('#div' + $(this).attr('target')).hide();
    });

Thanks once again for all your help!

Answer 1

not sure if this is what you want but you can have a look to this fiddle..

http://jsfiddle.net/XwN2L/1165/

create a link with class hide..

and call the click function

$('.hide').click(function () {
  $('.targetDiv').hide();

});