Easier way to hide/show divs with JQuery

html, jquery

Solution

Data attributes could be an option:

$(".btn").click(function () {
    $(".Hide").hide("fast");
    $("#" + $(this).data('type')).show("fast"); 
});

HTML:

<a href="#" id="btn_one" data-type="one" class="btn">one</a>
<a href="#" id="btn_two" data-type="two" class="btn">one</a>
<a href="#" id="btn_three" data-type="three" class="btn">one</a>

You can use `data-something` to refer corresponding element.

http://jsfiddle.net/dfsq/u8CAD/

Problem

I want to hide all the ones with the class `.Hide` and then show a specific div according to which link I clicked. I got this so far, but is there a easier way? My code so far: (using JQuery) ``` $(".btn").click(function (){ $(".Hide").hide("fast"); }); $("#btn_one").click(function () { $("#one").show("fast"); }); $("#btn_two").click(function () { $("#two").show("fast"); }); $("#btn_three").click(function () { $("#three").show("fast"); }); ``` HTML: ``` <a href="#" id="btn_one" class="btn">one</a> <a href="#" id="btn_two" class="btn">one</a> <a href="#" id="btn_three" class="btn">one</a> <div id="one" class="Hide">1</div> <div id="two" class="Hide">2</div> <div id="three" class="Hide">3</div> ```

Original source