CODEWITHSUNDEEP
jquery
subho das
subho das

Reputation: 391

How to open different divs by clicking on a single button?

I have a button/link. I want to open multiple divs on multiple clicks on a single button.

    <a href="#">Link</a>

<div id="one">one</div>
<div id="Two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>

Any help? Thanks-

User meant on "open multiple divs on multiple clicks on a single button" (cite from comment):

"What I meant is, when I click first time on link, first div "one" will appear, when I click on 2nd time, 2nd div "Two" will appear & it'll overwrite the first div.. & it'll continue like that."

Upvotes: 1

Views: 3207

Answers (5)

red-X
red-X

Reputation: 5128

give this a try:http://jsfiddle.net/m9EKS/

<a href="#" id="clickMe">Link</a>

<div class="test">one</div>
<div class="test">Two</div>
<div class="test">Three</div>
<div class="test">Four</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        $(".test:hidden").first().show();
    });
});
</script>


<style type="text/css">
    .test { display : none; }
</style>

Upvotes: 1

Sergey Kuznetsov
Sergey Kuznetsov

Reputation: 8721

If you need to toggle between divs you can use this example:

<style type="text/css">
    .show { display : block; }
    .hide { display : none; }
</style>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        var visibleElement = $("#splash .show");
        visibleElement.removeClass("show").addClass("hide");
        if (visibleElement.next().length > 0) {
            visibleElement.next().removeClass("hide").addClass("show");
        }
        else {
            $("#splash div:first").removeClass("hide").addClass("show");
        }
    });
});
</script>

<a href="#" id="clickMe">Link</a>

<div id="splash">
    <div class="show">one</div>
    <div class="hide">Two</div>
    <div class="hide">Three</div>
    <div class="hide">Four</div>
</div>

Upvotes: 0

Baz1nga
Baz1nga

Reputation: 15579

<a href="#" id="clickMe" divToShow="div1">Link</a>
<div  id="1">one</div>
<div  id="2">Two</div>
<div id="3">Three</div>
<div id="4">Four</div>


<script type="text/javascript">
var counter=1;
  $("#clickMe").live("click",function (e) {
    e.preventDefault();
    $("#"+(counter++))).show();
  });

</script>

Upvotes: 2

Ayush
Ayush

Reputation: 42450

One way to do it would be via Javascript (Jquery not necesarry).

Set all divs to be initially hidden.

<div id="one" class="showHide">one</div>
<div id="Two" class="showHide">Two</div>
<div id="Three" class="showHide">Three</div>
<div id="Four" class="showHide">Four</div>

div.showHide{visiblity:hidden}

Your link would call a JS function

<a href="#" onclick="showHide()">Link</a>

<script type="text/javascript">
 var clickCount=1;
 function showHide()
 {
    elementName = 'div'+clickCount;
    var switchTo = 'hidden';
    if (document.getElementById(elementName ).style.visibility == 'hidden')
        switchTo = 'visible';            

    document.getElementById(elementName ).style.visibility = switchTo ;
    clickCount++;

 }
</script>

Upvotes: 0

dwalldorf
dwalldorf

Reputation: 1379

You could change the names of your div-tags to something like div_1, div_2 etc and iterate trough them in a javascript function. This could be a propper possibility to address them for what ever you mean by open.

Your JavaScript might look something like this:

<script type="text/javascript">
    var temp = 1;
    function openDiv() {
        var elem = document.getElementById('div_' + temp);
        if (elem != -1) {
            elem.doWhatEverYouMeanByOpen();
            temp = temp + 1;
        }
    }
</script>

In your HTML you can call this function when clicking the link like:

<a href="#" onlick="openDiv();">Link</a>

Upvotes: 1

Related Questions