0

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!

Improve this question
2
  • Seems to work for me, what exactly is the issue here? jsfiddle.net/W3HtS Commented Jan 3, 2013 at 10:18
  • can you elaborate on 'on what action' it should hide 'exactly what'? Do you wish to hide the currently shown .targetDiv when someone clicks the current link again? Commented Jan 3, 2013 at 10:19

3 Answers 3

Reset to default
2

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

});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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/

Improve this answer

Comments

0

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.