Loading...


Loading...

Welcome!

Sign up for a free account, or log in here.

Member Login

You can login by following the link.

Not a Member? Sign up! It's Free!

Please feel free to register.

Click to log in.

Jquery, addClass & Tracking Toggles

When creating a theme recently I had a need to track various div toggling. Perhaps stuck a bit in the old JavaScript I used a variable, but then another theme project comes along and I realised there’s a better method. Actually it was more of a ‘Doh what am I doing?’ moment.

Instead of a variable, I am now using a class to keep track of the div’s toggled status. In the header.php file of the theme, I have this bit of code:

$(document).ready(function() {
 $(‘.post-collapse’).click(function() {
  $(this).parent().parent().siblings(‘:eq(0)’).slideToggle(500);
  if ($(this).hasClass(‘slid’)) {
   $(this).css({backgroundPosition:”top left”});
   $(this).removeClass(‘slid’);
  } else {
   $(this).css({backgroundPosition:”0px -36px”});
   $(this).addClass(‘slid’);
  }
 });
});

The post-collapse class is the class attached to a div which is clicked to collapse the main post div. The jquery checks for the slid class. This changes the background position of the image in the post-collapse class, for aesthetic purposes exchanging a + mark for a – mark.

The structure of the html post is as follows:

<div class=”post”>
 <div class=”post-title”><h2>TITLE</h2><div class=”post-collapse”></div></div>
 <div class=”post-content”></div>
 <div class=”post-bottom”></div>
</div>

But addClass is definately a great way of keeping track of something like this, especially in a WordPress environment where there may be many post classes on the page (such as an index page, category page etc.,).



Leave a Reply



You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


The English Guy on Twitter

Raised Paper WordPress Theme

Raised Paper WordPress Theme screenshot
Theme Price

Onyx WordPress Theme

Onyx WordPress Theme screenshot
Theme Price

Victoriana WordPress Theme

Victoriana WordPress Theme screenshot
Theme Price

Expression Blue WordPress Theme

Expression Blue WordPress Theme screenshot
Theme Price

Premium WordPress Theme Release: Natural Green

Premium WordPress Theme Release: Natural Green screenshot
Theme Price

Theme Release: Ikon WordPress Theme

Theme Release: Ikon WordPress Theme screenshot
Theme Price

Shocking WordPress Theme Release

Shocking WordPress Theme Release screenshot
Theme Price

Digitalis WordPress Theme Release

Digitalis WordPress Theme Release screenshot
Theme Price

WordPress Theme: OpenAir Theme

WordPress Theme: OpenAir Theme screenshot
Theme Price

WordPress Theme: Very English

WordPress Theme: Very English screenshot
Theme Price

News Print v3.0 WordPress Theme Released

News Print v3.0 WordPress Theme Released screenshot
Theme Price

Reclamation WordPress Theme

Reclamation WordPress Theme screenshot
Theme Price