1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Show/Hide any div box with jQuery in WordPress

Discussion in 'WordPress' started by kuzo, Aug 3, 2011.

  1. #1
    Hi!
    I have set Jsriprt up in header.php like this:
    ......<!--[if IE 6]>
    	<script src="<?php bloginfo('template_url'); ?>/js/pngfix.js"></script>
    <![endif]--> 
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script src="<?php bloginfo('template_directory'); ?>/menu/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
    <!--[if lt IE 7]>
    	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
    <![endif]-->
    <!-- Load the MenuMatic Class -->
    <script src="<?php bloginfo('template_directory'); ?>/menu/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
    [COLOR="#FF0000"]<?php wp_enqueue_script('jquery'); ?>[/COLOR]
    <?php echo get_theme_option("head") . "\n";  wp_head(); ?>
    [COLOR="#FF0000"]<script type="text/javascript">
    jQuery(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
      jQuery('#toggle-search').hide();
    
     // toggles the slickbox on clicking the noted link
      jQuery('a#slick-slidetoggle').click(function() {
    	jQuery('#toggle-search').slideToggle(0,0000001);
    	return false;
      });
    });
    </script>[/COLOR]
    </head>
    <body>......
    Code (markup):
    Then WORDPRESS page I´ve edited like:
    <a href="#" id="slick-slidetoggle">When I click here</a>
    <div id="toggle-search">
    This will show up
    </div>
    Code (markup):
    Little problem is-> when I open the page with this show/hide function, at the beginning the hidden text shows up for 1second.-> I would like to prevent it from doing that. How can I do that?
    + How can I add more divs/show hide text like:
    <a href="#" id="slick-slidetoggle">When I click here</a>
    <div id="toggle-search">
    This will show up
    <a href="#" id="slick-slidetoggle">When I click here2</a>
    <div id="toggle-search">
    This will show up2
    </div>
    Code (markup):
    ...
    What to change?
    Thanks
     
    kuzo, Aug 3, 2011 IP
  2. bogi

    bogi Well-Known Member

    Messages:
    482
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    140
    #2
    It's because jQuery hides the div as soon as your DOM is ready (site is finished loading):

    jQuery('#toggle-search').hide();
    Code (markup):
    You can add the following line to your CSS in order to hide it immediately:

    #toggle-search { display:none }
    Code (markup):
    PS: You need to close the first div in your last code.
    PSS: You can't have two divs with the same IDs, you should use classes there.
     
    bogi, Aug 4, 2011 IP
  3. kuzo

    kuzo Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I added this:
    [COLOR="#FF0000"]#toggle-search { display:none }[/COLOR]
    Code (markup):
    into code->
    <?php wp_enqueue_script('jquery'); ?>
    <?php echo get_theme_option("head") . "\n";  wp_head(); ?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
     [COLOR="#FF0000"] jQuery('#toggle-search { display:none }').hide();[/COLOR]
    
     // toggles the slickbox on clicking the noted link
      jQuery('a#slick-slidetoggle').click(function() {
    	jQuery('#toggle-search').slideToggle(0,0000001);
    	return false;
      });
    });
    </script>
    </head>
    <body>
    Code (markup):
    But it actually shows the text immediately( text isnt hidden until I click on that), [I am not sure if I put it into right place]

    And I still dont know how to add classes to my code (How can I manage that?
    <a href="#" id="slick-slidetoggle">When I click here</a> 
    <div id="toggle-search">
    This will shows 
    </div>
    Code (markup):
    Thanks
     
    kuzo, Aug 4, 2011 IP
  4. bogi

    bogi Well-Known Member

    Messages:
    482
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    140
    #4
    The style should go into your css stylesheet or should be wrapped between <style> tags in your header and not within <script> tags:

    <style type="text/css">
    #toggle-search { display:none }
    </style>
    
    Code (markup):
    To add classes you need to add class="" attributes to your code or just replace the id="" attributes with class="":

    <a href="#" class="slick-slidetoggle">When I click here</a> 
    <div class="toggle-search">
    This will shows 
    </div>
    
    Code (markup):
    If you replaced the IDs with classes, you need to change your javascript too, because if you insert the above code two times, whichever link you click on both hidden div will become visible.

    There are several ways to solve this. One of the simplest is to wrap your link and hidden div with another div:

    <div>
    <a href="#" class="slick-slidetoggle">When I click here</a> 
    <div class="toggle-search">
    This will shows
    </div>
    </div>
    
    <div>
    <a href="#" class="slick-slidetoggle">When I click here</a> 
    <div class="toggle-search">
    This will shows 
    </div>
    </div>
    Code (markup):
    And change your code something like this. Once you click on the link it will search its parent's div with "toggle-search" class and toggle it.

    <script type="text/javascript">
    jQuery(document).ready(function() {
      
     // toggles the slickbox on clicking the noted link
      jQuery('.slick-slidetoggle').click(function(e) {
      	e.preventDefault();
    	jQuery(this).parent().children('.toggle-search').slideToggle(0.0000001);
      });
    });
    </script>
    Code (markup):
    I hope it helps. It really should work.
     
    bogi, Aug 4, 2011 IP
  5. kuzo

    kuzo Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks! WORKS GREAT ;-)
     
    kuzo, Aug 4, 2011 IP
  6. bogi

    bogi Well-Known Member

    Messages:
    482
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    140
    #6
    No problem ;)
     
    bogi, Aug 4, 2011 IP