I created a website with two buttons implemented using jQuery. When I click on btn1, the first image appears. Then, when I click on btn2, the first image disappears and the second image associated with btn2 appears.
The issue arises when I try to switch back to btn1 after clicking btn2. It requires a double click on each button to toggle between showing and hiding the images.
My goal is to be able to click once to display an image and seamlessly switch to the other button to show its corresponding image without any extra clicks.
Additionally, I want the third image to appear when the website is loaded initially, but hide as soon as either of the buttons (btn1 or btn2) are clicked.
The third image is not related to btn1 or btn2, it should only appear upon opening the webpage and disappear when clicking on any of the button images. Thank you for your assistance.
<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>