CODEWITHSUNDEEP
javascriptjquerycsshtml
Ahmet agha
Ahmet agha

Reputation: 101

Jquery buttons to show/ hide images and text

I build a website, in this website I have this two buttons by jQuery when I click on the bt1 the image appear and then I'll click on the btn2 the first image should dissapear and the second image for this button btn2 appear.

The problem is I click on btn1 and then click on btn2, when I want to back to btn1 and click it, it not work. I have to perform a double click on each other, click to open image and the other to close.

I want to click one time to see image and when i click on the second button the first image disappear and open the second image.

And I want that image** appear when I open the website but when I click on any button (btn1,btn2) the image hide disappear.

** 3rd image not for (btn1/btn2) but appear when i open my web n disappear when i click on any image thank for help 

<html>
<head>

<script type="text/javascript">

function showhide_menu(id){
   $("#" + id).toggle();
}

</script>
</head>
<body>
<button onclick="showhide_menu('btn1');">Show/Hide.  </button>

 <button onclick="showhide_menu('btn2');">Show/Hide.  </button>

<div id="btn1" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....</div>

<div id="btn2" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....</div>

</body>
</html>

Upvotes: 0

Views: 2987

Answers (2)

The Alpha
The Alpha

Reputation: 146191

You can use this too

function showhide_menu(){
    if($('#btn1').is(':visible'))
    { 
        $('#btn1').hide();
        $('#btn2').show();
    }
    else
    {
       $('#btn2').hide();
        $('#btn1').show();
    }
}

Upvotes: 2

Alex
Alex

Reputation: 6406

Give the btn-DIVs a class. Then hide them before toggling:

http://jsfiddle.net/qYCUJ/

HTML

<div id="btn1" class="btn" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....
</div>
<div id="btn2" class="btn" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....
</div>

JS

function showhide_menu(id){
    $('.btn:not(#'+id+')').hide();
    $("#" + id).toggle();
}

Upvotes: 2

Related Questions