Question

I am using the jquery show hide div on a wordpress blog.

link available here 72.52.206.17/ ~guerilla/ category/vlog/ <-remove extra spaces un url

code for jquery is pulled in the header php like so:

<!-- VLOG EXPANDABLE BOX -->

<script type="text/javascript">
  $(document).ready(function(){
  $('.content1').hide();

  $('a').click(function(){
 $('.content1').show('slow');

});

 $('a.close').click(function(){
        $('.content1').hide('slow');
})

});
</script>

<!-- VLOG EXPANDABLE BOX -->

then we have code that shows and hides the menu blog roll on a special page called category-vlog php:

code is as such:

<a href="#" id="click">Expand Blog</a>
     <div class="content1">
          <?php get_sidebar(); ?>
            <p> <a href="#" class="close">Collapse Blog</a></p>
</div>

• this code in itself functions perfectly- what happens when you click on the main menu links is that the hidden div appears, how do I get the div to stay hidden when I click on other page links?

Im at a loss.

• even though this is a minor issue- its major in the site owners mind- how do I get to

---

I’m still missing something, I made the changes suggested by Robotsushi, however I am not able to make this work.

When I make changes to the code in the proper places the show/hide stops working.

Answer 1

First off switch your approach to use the toggle jQuery method. It encapsulates what you are trying to accomplish. so you can say:

$(".content1").toggle(); 

This will change the display property to the opposite of its current state.
If the element is initially displayed, it will be hidden; if hidden, it will be shown.

This code is the problem:

$('a').click(function(){
 $('.content1').show('slow');

What this is saying is: every time an element is clicked go ahead and open the element with a class name of “content1”.

Change the a to the id or class name of the element you want to open content1 with. Something like this:

$('#OpenContent1').click(function(){
     $('.content1').show('slow');