Show/hide multiple divs using JavaScript

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

When the a.show tag would contain a href attribtue, the target attribute you use would trigger opening a new browser-window or -tab. I would advise to use a data attribute here.

If you can use css3, consider a css only solution. Not sure what you mean, but this jsfiddle contains an example where a mousedown action shows a tooltip-like box using the data-attribute for its content.

The css in that example:

a.show:active:after{
    position:absolute;
    color:green;
    margin-top:1.0em;
    margin-left:-1em;
    background: white;
    z-index:2;
    content: 'Lorem Ipsum 'attr(data-target);
    border: 1px solid #999;
    padding: 3px;
}

Answer 2

You can do it like this aswell, so you can toggle the option instead of having an extra button to hide all.

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

http://jsfiddle.net/W3HtS/1/

Answer 3

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

});