Home/ Questions/Q 6385327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:53:07+00:00

I am having a hard time trying to show/hide a div on click. Basically

  • 0

I am having a hard time trying to show/hide a div on click. Basically you click on the flowers (div, the one I want to toggle) and they fade out or hide (which is good) and then disappear (which is not good). I need to be able to click on the flowers and have them fade out and then be able to click (on the same “flowers” div) and have them fade back in or show (like a light switch).

Here’s the JavaScript code I’m using:

$('.show_hide').click(function() {
$("#treeFlowers").fadeToggle()
return false;
});;
});

And here’s the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>App 1-1</title>
<link rel="stylesheet" type="text/css" href="css/master.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/master.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="mainWrapper">
<div id="treeFlowers">
<a href="#" class="show_hide"><img src="images/app1-1/treeFlowers.png" alt="tree Flowers"/></a>
</div>
<div id="treeApp">
<img src="images/app1-1/tree.png" alt="light tree"/>
</div>
<div id="textApp">
<img src="images/app1-1/text1.png" alt="text"/>
</div>  
<div id="flowers">
<img src="images/app1-1/flowers.png" alt="flowers" />
</div>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should nest the flowers div inside another container div which will be the one being clicked on, lets call it flower-container, then do a toggle on it as follows:

    $(function(){
  $('#flowers-container').toggle(
    function(e){ $('#threeFlowers').hide(); },
    function(e){ $('#threeFlowers').show(); });
});
    • 0