How to hide/show div by Jquery or Javascript?

Question

I have 3 Divs (screens i.e A ,B C ) ..each screen has a button..I want to change the screen on button click..How can this be achieved by using javascript jquery no C#...All the screen must have the same location...

Explanantion :

1 div should be displayed at a time .. If Screen A is displaying Screen B and C should be hidden.. on button click of screen A the Screen A should get disappear and Screen B becomes visible .. Screen B has two button if button1 is press Screen A should appear and If button2 is press Screen C should appear...

    <div>
        This is Screen A<br />
        <asp:Button ID="Button1" runat="server" Text="Go to Screen B" />
    </div>
    <div>
        <div>
            This is Screen B</div>
        <br />
        <asp:Button ID="Button2" runat="server" Text="Go to Screen A" />
        <br />
        <asp:Button ID="Button3" runat="server" Text="Go to Screen C" />
    </div>
    <div>
        <div>
            This is Screen&nbsp; C</div>
        <br />
        <asp:Button ID="Button4" runat="server" Text="Go to Screen B" />
    </div>

Use update panel and on button click set the other two div false using jquery or javascript. — Litisqe Kumar
– Litisqe Kumar, Commented Jul 3, 2015 at 5:37
First try by yourself then ask question.. and also put your code which you have tried. — Shirish
– Shirish, Commented Jul 3, 2015 at 5:38

Saravana Kumar · Accepted Answer · 2015-07-03 06:01:14Z

2

Try this using JavaScript. FiddlerDEMO

function Show(id)
{
    document.getElementById("divA").style.display = "none";
    document.getElementById("divB").style.display = "none";
    document.getElementById("divC").style.display = "none";      
    
    document.getElementById(id).style.display = "block";
}

.clsDiv
{
    display: none;
}

<div id="divA">
	This is Screen A<br />
	<input type="button" value="Go to Screen B" onClick="Show('divB')" />
</div>
<div id="divB" class="clsDiv">
   
	This is Screen B<br />
	
	<input type="button" value="Go to Screen A" onClick="Show('divA')"/>
	<br />
	<input type="button" value="Go to Screen C" onClick="Show('divC')"/>
</div>
<div id="divC" class="clsDiv">
	<div>
		This is Screen&nbsp; C</div>
	<br />
	<input type="button" value="Go to Screen B" onClick="Show('divB')" />
</div>

answered Jul 3, 2015 at 6:01

Saravana Kumar

3,7275 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

venkatesh thigala · Accepted Answer · 2015-07-03 05:51:10Z

1

Give classes to dives and give that class in jquery code.this will work.

$(document).ready(function(){
    $("#Button1").click(function(){
        $("div-a class").hide();
        $("div-c class").hide();
        $("div-b class").show();
    });

   $("#Button2").click(function(){
        $("div-b class").hide();
        $("div-c class").hide();
        $("div-a class").show();
    });

   $("#Button2").click(function(){
        $("div-b class").hide();
        $("div-a class").hide();
        $("div-c class").show();
    });

   $("#Button2").click(function(){
        $("div-a class").hide();
        $("div-c class").hide();
        $("div-b class").show();
    });
});

answered Jul 3, 2015 at 5:51

venkatesh thigala

698 bronze badges

Collectives™ on Stack Overflow

How to hide/show div by Jquery or Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related