Home/ Questions/Q 7606857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:30:52+00:00

I build a website, in this website I have this two buttons by jQuery

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
}
    • 0