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