Simple JQuery Toggle Tutorial | CSS JQuery Slide Toggle

Today I am going to share a very common and easy jquery tutorial with you. A JQuery Slide Toggle function.

.slideToggle() function is used to hide or show matched elements in a sliding effect.

So the basic syntax is

[js]$("div").slideToggle("slow");[/js]

So this was the basic syntax on how to slide toggle a div, now lets start with some real working examples.

So first the basic html code:

[html]
<div id="toggle">
<ul>
<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>
<li>WordPress Multiple Category Search</li>
<div>
Since when I started wordpress, I had a question in my mind, why wordpress doesn’t give multiple search option? I googled a lot, but couldn’t find a plugin or code which exactly works. So finally decided to go more into...<a href="http://webstutorial.com/wordpress-multiple-category-search/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>

<li>Ten WordPress Useful Functions And Snippets</li>
<div>
Some useful WordPress PHP funtions. Just copy and paste these functions in your themes functions.php file Change the WP Login Logo & URL Link Load JQuery From Google CDN How to remove the WordPress Version Information Remove Default WordPress Meta...<a href="http://webstutorial.com/ten-wordpress-useful-functions/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>A Good PHP Developer Can Answer This | PHP Test</li>
<div>
PHP developers go through 3 stages in their life Beginner Good Best A beginner PHP coder is some one who just started making some PHP projects in CMS like WordPress, Joomla, Magento and other PHP based CMS. A good PHP... <a href="http://webstutorial.com/good-php-developer-answer-php-test/programming/php">Continue reading</a>
</div>

</ul>
</div>
[/html]

And finally our js

[js]
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function(){
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
</script>
[/js]

Explanation:

In our basic html layout, we have placed a div exactly next to our li. So we tell the jquery to slide exactly the next div of the current clicked li. If we directly write slideToggle then it will slide all the div's of the current page. In the above js code, we are also using a stop() function. This is essential to use, to avoid multiple clicks on a same li making it to slide for continuous multiple times of sliding.

Here's a working demo of the above code

How to display errors while the display_errors is off in the php.ini file

Display_error feature is turned off or disabled mainly by your web hosting ISP or provider from the php.ini file. I hope this small tutorial will be of great help to display your php errors.

php.ini file will contain code some what like this

[php]
; display_errors = Off [Security]
; With this directive set to off, errors that occur during the execution of
; scripts will no longer be displayed as a part of the script output, and thus,
; will no longer be exposed to remote users. With some errors, the error message
; content may expose information about your script, web server, or database
; server that may be exploitable for hacking. Production sites should have this
; directive set to off.

; Print out errors (as a part of the output). For production web sites,
; you're strongly encouraged to turn this feature off, and use error logging
; instead (see below). Keeping display_errors enabled on a production web site
; may reveal security information to end users, such as file paths on your Web
; server, your database schema or other information.
display_errors = On
[/php]

Considering some security issues display_errors is usually disabled  by many web hosting companies in order to protect your website from any harm. One way to display errors while the display_errors is off in the php.ini file, is to add these functions at the beginning of your script files .

Just copy and paste this code at the beginning of your script files.

[php]
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
error_reporting(E_ALL);
[/php]

And thats it you can now display errors.