CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
BigGirl1017
BigGirl1017

Reputation: 61

display different div when click buttons

I am trying to accomplish a page which has two buttons on the bottom. Clicking each of these buttons will bring out different content. For example:

<div id="page1">...some content...</div>
<div id="page2">...some content...</div>

My css:

#page1 { display: block;}
#page2 { display: none;}

And the buttons are images:

<div id="button1"><img src="images/button1.png"/></div>
<div id="button2"><img src="images/button2.png"/></div>

I am using javascript to make the buttons work. #block is an object that moves when the buttons are clicked:

<script language="javascript">
    $(document).ready(function () {
        $("#button1").click(function () {
            $("#block").animate({
                left: "10px"
            });
            $("#page1").attr("display", "block");
            $("#page2").attr("display", "none");
        });
        $("#button2").click(function () {
            $("#block").animate({
                left: "100px"
            });
            $("#page1").attr("display", "none");
            $("#page2").attr("display", "block");
        });
    });
</script>

So when #button1 is clicked:
#page1 will be changed to display:block;
#page2 will be changed to display:none; - hidden

When #button2 is clicked:
#page1 will be changed to display:none; - hidden
#page2 will be changed to display:block;
This means it will show the content on page2

Upvotes: 1

Views: 3597

Answers (2)

AwokeKnowing
AwokeKnowing

Reputation: 8206

you really should have a css class called page and another called page-invisible. Then you just do

$('#page1').addClass("page-invisible");
$('#page2').removeClass("page-invisible");

the class page-invisible just is {display:none}, or it can be something like {opacity:.3; z-index:0} etc to have it kind of "behind" the other one (you would have to set position absolute etc to put the divs on top of eachother.

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71908

display is not an attribute, it's a property of the style attribute/object. But jQuery has its own show, hide and toggle methods, so you can simply use this:

<script language="javascript">
$(document).ready(function()
{
      $("#button1").click(function(){
           $("#block").animate({left:"10px"});
           $("#page1, #page2").toggle();
      });
      $("#button2").click(function(){
           $("#block").animate({left:"100px"});
           $("#page1, #page2").toggle(); 
      }); 
});
</script>

Upvotes: 3

Related Questions