CODEWITHSUNDEEP
jqueryhtml
Michael Tot Korsgaard
Michael Tot Korsgaard

Reputation: 4014

Easier way to hide/show divs with JQuery

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>

Upvotes: 5

Views: 2611

Answers (5)

musefan
musefan

Reputation: 48415

Firstly, you can hide all of them with the following:

$(".Hide").hide();

After that you need to parse the ID of the clicked link to get the ID or the DIV that needs to be shown. For that you could do:

var id = $(this).attr("id").replace("btn_", "");

This solution would be based on your current HTML structure, with no changes.

However, I would recommend that you use a data-* attribute to store the ID. A complete solution would look like this:

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

<div id="one" class="Hide">1</div>
<div id="two" class="Hide">2</div>
<div id="three" class="Hide">3</div>

with the following javascript/JQuery:

$(".btn").click(function(e){
   e.preventDefault();
   $(".Hide").hide();
   var id = $(this).data("showid");
   $("#" + id).show();
});

Here is a working example

Upvotes: -4

insertusernamehere
insertusernamehere

Reputation: 23580

Assuming your links and divs are in a separate container, you can use this:

<nav>
    <a href="#" class="btn">one</a>
    <a href="#" class="btn">two</a>
    <a href="#" class="btn">three</a>
</nav>

<div>
    <div class="Hide">1</div>
    <div class="Hide">2</div>
    <div class="Hide">3</div>
</div>

JavaScript

$('.btn').click(function() {
     $(".Hide").hide("fast").eq( $(this).index() ).show("fast");
});

Demo

http://jsfiddle.net/TUrgG/

This one doesn't need any ids nor data-*-attributes.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

One way

$("a.btn[id^=btn]").click(function() {
    $(".Hide").hide("fast");
    var id = $(this).attr('id').substring(4);
    $("#" + id).show("fast");
});

Demo: Fiddle

Upvotes: 1

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

As it is right now, I think that's about as good as you can make it (you could place the hiding code in a function and reference from all, but it's about the same).

If you can change the HTML code a bit, and add a rel attribute to the buttons, containing the id of the related element, then you can really make the code better (I'm using .click() but if your jQuery version allows you should change to .on()):

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

And the relevant HTML

<a href="#" id="btn_one" class="btn" rel="one">one</a>
<div id="one" class="Hide">1</div>

Upvotes: 2

dfsq
dfsq

Reputation: 193271

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/

Upvotes: 3

Related Questions