CODEWITHSUNDEEP
javascriptajaxhtmlcss
user1165077
user1165077

Reputation: 121

Show one div and hide rest all

Now am using fade in fadeout to toggle the content on button click.

the script i used for the same is

function showHide(divId){
    if (document.getElementById(divID).style.display == "none") {
        $('#'+divID).fadeIn(3000);

    } else {
        $('#'+divID).fadeOut(3000);
    }
}

how to modify the above code to show content on button click.

consider i have 2 buttons

<button> button1</button>
<button> button2</button>


<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>

i wanna show either of the div, when button1 is clicked, button 2 content shouldn't be visible and vice verse.

Upvotes: 2

Views: 5088

Answers (4)

Rakesh Chouhan
Rakesh Chouhan

Reputation: 1230

Please change your HTML into this :

<button id="btn1" onclick="ShowHideDiv(this);"> button1</button>
<button id="btn2" onclick="ShowHideDiv(this);"> button</button>


<div id="div1" class='divShowHide'> content of button 1 </div>
<div id="div2" class='divShowHide'> content of button 2</div>

now try this code :

 firstCall this function on domready:

 $(document).on('click',function(){
      $('.divShowHide').fadeOut(30);
 });

function ShowHideDiv(divId){

   $('.divShowHide').fadeOut(3000);
   $(divId).fadeIn(3000);

 }

Upvotes: 0

Barnee
Barnee

Reputation: 3389

I'm a beginner at js, but try this:

HTML:

<button id="btn1"> button1</button>
<button id="btn2"> button2</button>

<div id="div1"> content of button 1 </div>
<div id="div2" class="hidden"> content of button 2</div>

CSS: 

.hidden { display: none;}

JS:

$('#btn1').click(function(){
   $('#div2').addClass('hidden');
   $('#div1').removeClass('hidden');
})
$('#btn2').click(function(){
   $('#div1').addClass('hidden');
   $('#div2').removeClass('hidden');
})

Here's a demo.

Upvotes: 0

Ali Shah Ahmed
Ali Shah Ahmed

Reputation: 3333

You can use the onclick event on button.

<button id="button1" onclick="ShowHideDiv(this);">button1</button>
<button id="button2" onclick="ShowHideDiv(this);">button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>

In the script tag, this function can be used.

function ShowHide(element)
{
   if ($(element).attr("id") == "button1")
   {
      $("#div1").fadeIn(3000);
      $("#div2").fadeOut(3000);
   }
   else if ($(element).attr("id") == "button2")
   {
      $("#div2").fadeIn(3000);
      $("#div1").fadeOut(3000);
   }
}


If you want to hide all the divs except one, you can use code similar to the following:

$("div").fadeOut(3000);

This will hide all the divs.
Then this will show the proper div:

$("#divId").fadeIn(3000);

Use proper Id of div in divId

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Update showHide

function showHide(divID) {
    $("div").not("#" + divID).fadeOut(3000);

Choosing to fade them out every time is fine since hiding a div would not show another. You should probably also give all of these divs a class and use that instead of just "div"

Upvotes: 1

Related Questions