CODEWITHSUNDEEP
javascriptjquery
youngster
youngster

Reputation: 195

on click to hide div

I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).

However, I don't know how to close all the already opened divs when I click on other buttons. For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.

My relevant HTML

<div id="controls">
    <input type="button" class="addBtn" value="Add" id="add"/>
    <input type="button" class="editBtn" value="Edit"  id="edit"/>
    <input type="button" class="viewBtn" value="View" id="view"/>
    <input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

My JS:

$(document).ready(function(){
    $("#add").click(function(){
        $("#test1").slideToggle("fast");
    });
    $("#edit").click(function(){
        $("#test2").slideToggle("fast");
    });
    $("#view").click(function(){
        $("#test3").slideToggle("fast");
    });
});

Thanks for suggestions and tips.

Upvotes: 6

Views: 169

Answers (5)

Ramniwas chhimpa
Ramniwas chhimpa

Reputation: 205

replace your jquery code with the following code

  $(document).ready(function()
    {
    $("#add").click(function(){
         $("#test1").show();
        $("#test2,#test3").hide();
    });
    $("#edit").click(function(){
    $("#test2").slideToggle("fast");
        $("#test1,#test3").hide();
    });
    $("#view").click(function(){
    $("#test3").slideToggle("fast");
        $("#test1, #test2").hide();
    });
    });

Upvotes: 2

dipeshrijal
dipeshrijal

Reputation: 156

i guess this is the simplest thing you can do.. hope this helps you..

<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit"  id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

http://jsfiddle.net/alaskaz1864/VtLzB/1/

Upvotes: 5

Amit Kumar
Amit Kumar

Reputation: 5962

your jquery

$(document).ready(function(){
$("#add").click(function(){
    $("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");

});
$("#edit").click(function(){
    $("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");

});
$("#view").click(function(){
  $("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");

});
});

Demo

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Try to use attribute starts with selector to grab the similar elements, hide it after grabbing it then after that do your normal process,

$("#add").click(function(){
 $('div[id^=test]').hide();
 $("#test1").slideToggle("fast");
});

$("#edit").click(function(){
 $('div[id^=test]').hide();
 $("#test2").slideToggle("fast");
});

$("#view").click(function(){
 $('div[id^=test]').hide();
 $("#test3").slideToggle("fast");
});

DEMO

Even simpler,

$('[type=button]:not(#delete)').click(function(){
 $('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});

Special Note:

This code does not expect us to change the DOM structure by adding/hardcoding data-attribute.

DEMO

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337550

You need to add a common class to those elements, to close them all before opening the required one. You can also put data attributes on the buttons to DRY up your code. Try this:

<div id="controls">
    <input type="button" class="addBtn" data-rel="#test1" value="Add" id="add" />
    <input type="button" class="editBtn" data-rel="#test2" value="Edit" id="edit" />
    <input type="button" class="viewBtn" data-rel="#test3" value="View" id="view" />
    <input type="button" class="deleteBtn" value="Delete" id="delete" />
</div>
<div id="test1" class="content">test 1</div>
<div id="test2" class="content">test 2</div>
<div id="test3" class="content">test 3</div>

$('#controls input').click(function() {
    $('.content').slideUp('fast');
    $($(this).data('rel')).slideDown('fast');
});

Example fiddle

Upvotes: 1

Related Questions