JQuery Tutorials

JQuery Toggle

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hello welcome to another tutorial, today il be showing you how to intergrate a toggle feature for your wordpress comments.

 

Lets face it blogs/websites nowadays can be very large in terms of the amount of content they have on display, especially if your using some kind of blogging software like wordpress where people can leave a comment at the bottom of every article. Wouldnt it be good if you could collapse your comments area into a little button?? well today il show you how to accomplish it. Im going to be doing this tutorial using the wordpress default theme, but should pretty much the same for every blog. The first thing we need to do is create a simple button in photoshop. Create a new canvas 27×54 pixles, theres enough canvas space with those dimensions to get two 27×27 buttons on. You need to create two buttons,

- The first button will be for the un-toggled state.
– The second button will be the toggled state.

Heres my two simple buttons.

Step1

Once you’ve created your two buttons save them inside the wordpress themes images folder. Ive called mine “toggle_button.png”.

Goto your theme directory and open up the “style.css”, “single.php”, “header.php” and “comments.php” files. Open up a blank notepad document and save the blank notepad document as “toggle.js” inside a folder called “js” inside your wordpress themes folder. You need to download the jquery libary file you can get that HERE once you’ve downloaded it make sure its inside your “js” folder, then rename the file to just “jquery.js”. inside your “header.php” file locate the code where your style sheets are.

Step2

Underneath all the style sheets link your js files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<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'); ?>" />
<!--START JS FILES-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/toggle.js"></script>
<!--END JS FILES-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">

Remember…. because your using wordpress you cant link your js files in the same way as if it were a CSS template unless your js files live outside the themes folder. So instead of a normal link we have to use the wordpress PHP template directory tag. Were all done with the header.php file now so save and close. Head over to your “single.php” file, within the single.php file you need to locate this chunk of code.

1
2
3
<?php comments_template(); ?>
<?php endwhile; else: ?>

Above the first line we need to add a simple H2 tag saying leave a comment.

1
2
3
4
<h2>Leave a comment</h2>
<?php comments_template(); ?>
<?php endwhile; else: ?>

We then need to add another H2 tag but with a class of toggle underneath our first H2 tag.

1
2
3
4
5
6
7
<h2>Leave a comment</h2>   
<h2 class="toggle</h2> 
<?php comments_template(); ?>
<?php endwhile; else: ?>

Inside our H2 tag with a class of toggle we can add some dynamic wordpress code from the comments.php file, which will basically say “No. of comments on name of post”. The php code for this is in the comments.php file. Open it up and locate this chunk of code.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

 

Step3

Copy the code from the comments.php file inbetween the H2 class of toggle in the single.php fie.

1
2
3
4
5
6
7
<h2>Leave a comment</h2>   
<h2 class="toggle"><a href="#"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</a></h2>
<?php comments_template(); ?>
<?php endwhile; else: ?>

Now we dont want the bit of code we just copied to be displayed twice so in the comments.php file remove the code.

1
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

Underneath our H2 class of toggle we need to create a simple container for our comments to sit into, so we add a class of comments_container, end the DIV underneath the php comments template code.

1
2
3
4
5
6
7
8
9
10
11
<h2>Leave a comment</h2>   
<h2 class="toggle"><a href="#"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</a></h2>
<div class="comments_container">
<?php comments_template(); ?>
</div>
<?php endwhile; else: ?>

We now need to style our new elements, add the styles right at the bottom of style.css. Please refer to the commented code for each style description.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*--- TOGGLED COMMENTS --- */
h2.toggle {
    height: 27px; /*ADDS A HEIGH OF 27PX SAME AS OUR IMAGE*/
    line-height: 28px; /*ADDS 28PX LINE HEIGHT TO CENTER THE HEADER NEXT TO THE IMAGE*/
    width: 450px; /*WIDTH OF 450PX SAME AS OUR WORDPRESS DIV*/
    font-size: 20px; /*FONT SIZE OF 20PX*/
    font-weight: normal; /*FONT-WEIGHT NORMAL*/
    float: left; /*FLOATS OUR HEADER LEFT*/
    background-image: url(images/toggle_button.png); /*OUR PHOTOSHOP BUTTON IMAGE*/
    background-repeat: no-repeat; /*STOPS OUR BUTTON FROM REPEATING*/
    cursor: pointer; /*MAKES THE CURSOR CHANGE TO A POINT CURSOR ON MOUSE OVER*/
    margin-bottom: 5px; /*ADDS 5PX MARGIN TO THE BOTTOM*/
    padding-left: 40px; /*ADDS 40PX LEFT PADDING WHICH SHIFTS OUR HEADER TEXT AWAY FROM OUR IMAGE*/
    margin-top: 10px; /*ADDS A TOP MARGIN OF 10PX*/
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
h2.toggle a {
    color: #417db2; /*COLOR OF OUR TEXT LINK*/
    text-decoration: none; /*REMOVES UNDERSCORE FROM THE LINK*/
    display: block; /*DISPLAYS LINK AS A BLOCK ELEMENT*/
}
h2.togglr a:hover {
    color: #417db2; /*TEXT COLOR OF OUR LINK ON MOUSE OVER*/
}
h2.active {
    background-position: left bottom; /*SHIFTS OUR PHOTOSHOP BUTTON IMAGE DOWN TO REVEAL OUR OTHER IMAGE*/
}
.comments_container {
    overflow: hidden; /*HIDES ITEMS WHICH OVERFLOW THE CONTAINER*/
    width: 450px; /*GIVES CONTAINER A WIDTH OF 450PX SAME AS OUR WORDPRESS DIV*/
    clear: both; /*CLEARS BOTH FLOATS LEFT & RIGHT*/
}

Once you’ve added the styles open up your toggle.js file and paste in this bit of jquery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
//AUTO COLLAPSE'S TOGGLED ELEMENT
$(".comments_container").hide();
//CHANGES THE BUTTON FROM OPEN TO CLOSED AND VIS-VERSA
$("h2.toggle").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//SLIDES CONTAINER UP AND DOWN ON CLICK
$("h2.toggle").click(function(){
$(this).next(".comments_container")
.slideToggle("slow");
});
});

Save all your files and test it out. Heres a quick video of it in action.

 

Thanks for reading, good luck implementing into your website, Dont forget to share this post using the panel below. Till next time….

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.