Show hide div's depending on which link is clicked

Question

I have four links which i need to show hide there corresponding div depending on which one is clicked. Also if the same link is clicked it should hide its corresponding link. All fade fadIn.

Fiddle: http://jsfiddle.net/zangief007/mnotd7Lh/

<ul>
        <li><a id="category" href="">Catergory</a></li>
        <li><a id="style" href="">styles</a></li>
        <li><a id="brand" href="">brand</a></li>
    </ul>


    <div id="one">This is my category</div>
    <div id="two">This is styles</div>
    <div id="three">This is main brands</div>

JS:

$("#category").click(function(){
  $("#one").fadeToggle();
});

$("#style").click(function(){
  $("#two").fadeToggle();
});
$("#style").click(function(){
  $("#three").fadeToggle();
});

CSS:

#two, #three, #four{
    display:none;
}

score 1 · Answer 1 · answered Aug 24 '14 at 22:45

1

Working demo: http://jsfiddle.net/9ctfh6jc/ or this: http://jsfiddle.net/vm7oLjbd/

API you need is preventDefault() to prevent a tags default action.
http://api.jquery.com/event.preventdefault/

Try this:

$("#category").click(function(e){
    e.preventDefault();
  $("#one").fadeToggle();
});

$("#style").click(function(e){
    e.preventDefault();
  $("#two").fadeToggle();
});
$("#style").click(function(e){
    e.preventDefault();
  $("#three").fadeToggle();
});

answered Aug 24 '14 at 22:45

Tats_innit

33,991
10
71
77

1

I often see people mistakenly calling `stopEvent` when `preventDefault` will do the job with fewer side effects. – Ruan Mendes Aug 24 '14 at 22:57
@JuanMendes progressive learning I reckon `:)` Totally agree with you! – Tats_innit Aug 24 '14 at 22:58
Close, only problem is it doesnt close the other div once new one is clicked? – Steve Aug 24 '14 at 22:59
@Steve - > lil verbose here: http://jsfiddle.net/gu5b3mk1/ but I guess above post has a `class` example which is less verbose version `:)` but this demo might do what you want : http://jsfiddle.net/gu5b3mk1/ – Tats_innit Aug 24 '14 at 23:00

Moshtaf · Accepted Answer · 2014-08-24T23:21:07.370

1

Add a class name ("fading" for instance) to each link that you like to have this behavior and add the related div that should be toggled as an Attribute (relDiv="one" for instance). Also add a class to all related divs (class="relDiv" for instance).

So your HTML must be look like this:

<ul>
    <li><a class="fading" relDiv="one" href="">Catergory</a></li>
    <li><a class="fading" relDiv="two" href="">styles</a></li>
    <li><a class="fading" relDiv="three" href="">brand</a></li>
</ul>

<div id="one" class="relDiv">This is my category</div>
<div id="two" class="relDiv">This is styles</div>
<div id="three" class="relDiv">This is main brands</div>

And use just this few JQuery lines for as many as menu you want:

var currentDiv = 'one';
$(".fading").click(function(e){
    e.preventDefault();
    $this = $(this);
    if (currentDiv != $this.attr('relDiv')){
        $("#" + currentDiv).fadeOut( "slow", function() {
            $("#" + $this.attr('relDiv')).fadeIn();
        });
    }   
    currentDiv = $(this).attr('relDiv');
});

Check JSFiddle Demo

edited Aug 24 '14 at 23:21

answered Aug 24 '14 at 22:54

Moshtaf

4,833
2
24
34

Yo! ++1 to you as well, *small reco* I reckon highlight use of `preventDefault` as well. `:)`. – Tats_innit Aug 24 '14 at 22:56
Good job adding the `relDiv` attribute and the fading class for simpler code. Wouldn't it be better to use a `data-related-el` element to stick with standards and have your page still validate? See http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml – Ruan Mendes Aug 24 '14 at 22:58
In fact in this case he/she can don't use tags at all, it can be done using the `
` tags and set the `cursor:pointer` style and we can remove links and `e.preventDefault();`. but i don't do that because think maybe he/she has a reason to use links. although i appreciate you answer for highlighting `preventDefault`.

Moshtaf

Aug 24 '14 at 23:02

@Moshtaf There should be links so that the page still works without JavaScript. I reckon the OP left them out for simplicity – Ruan Mendes Aug 24 '14 at 23:03

This is great, but only one div at a time can be open. And they need have a self closing option as well. – Steve Aug 24 '14 at 23:08

@JuanMendes: Absolutely you're right, but i don't know that why i don't like this `.data()` attr, it seems that don't work in all situations easily or i miss something, but i'm comfortable with `.attr()` that always works fine !! – Moshtaf Aug 24 '14 at 23:24

@JuanMendes: Really? if disable javascript, the divs that has `display:none'` class start hide and show if we use links? i must to check that in future. – Moshtaf Aug 24 '14 at 23:27

@Steve The main question you asked has been answered, you cannot post multiple requirements in a single question. Questions should be about a single problem you're facing. Otherwise, it sounds like: "Please write my code for me" – Ruan Mendes Aug 25 '14 at 12:17

Show hide div's depending on which link is clicked

2 Answers2