Jquery javascript Collapse using $this

I\’ve got four divs that toggle by their title (as you can see below I showed one set). Each title link class matches the class before the text field class. Instead of writing the javascipt four seperate times I was hoping to write something dryer using $this to target the current class, and then the current class the class text.

The important_info_header class will be a dynamic class for each div.

Not that great with this kind of writing so any help is welcome

Failed ATTEMPT

 $(this).click(function() {
    $(this+\'.text\').slideToggle(\'slow\', function() {
     //ani complete.

    });
  });

Working Markup

HTML START

    <h4><a href=\"javascript:void(0)\"  class=\"important_info_header\"><%= t(\"catalog_items.show_lot.important_info_header\")%></a></h4>
          <div class=\"important_info_header text\">
              <p><%= t(\"catalog_items.show_lot.important_info\") %></p>
          </div><!-- /text -->


 <h4><a href=\"javascript:void(0)\"  class=\"important_info_header\"><%= t(\"catalog_items.show_lot.important_info_header\")%></a></h4>
          <div class=\"important_info_header text\">
              <p><%= t(\"catalog_items.show_lot.important_info\") %></p>
          </div><!-- /text -->



 <h4><a href=\"javascript:void(0)\"  class=\"rules\"><%= t(\"catalog_items.show_lot.important_info_header\")%></a></h4>
          <div class=\"rules text\">
              <p><%= t(\"catalog_items.show_lot.important_info\") %></p>
          </div><!-- /text -->


 <h4><a href=\"javascript:void(0)\"  class=\"shipping\"><%= t(\"catalog_items.show_lot.important_info_header\")%></a></h4>
          <div class=\"shipping text\">
              <p><%= t(\"catalog_items.show_lot.important_info\") %></p>
          </div><!-- /text -->

HTML END

    $(\'.important_info_header\').click(function() {
    $(\'.important_info_header.text\').slideToggle(\'slow\', function() {
     //ani complete.

    });
  });

Rating: 3 out of 5 based on 3 ratings

Posts Related to Jquery javascript Collapse using $this

• Aug 01st, 2012 html - Extract part of inner text from a div using jquery Wednesday AM 03:06:24


• Aug 25th, 2012 html - hide 'div' tag in javascript Saturday AM 01:51:00


• Aug 27th, 2012 Difference between jquery selectors Monday AM 00:19:37


• Jul 19th, 2012 php - Setting the email correctly in a contact form Thursday AM 07:15:23


• Jul 19th, 2012 HTML/CSS - Image in div Thursday AM 09:55:25


• Jul 18th, 2012 html - Sticky CSS Footer Wednesday AM 10:20:04


• Jul 22nd, 2012 javascript - Can jquery do what javacript can do Sunday PM 13:57:20


• Aug 22nd, 2012 javascript - How to write jQuery code Wednesday PM 16:28:44


• Jul 08th, 2012 javascript - Adding JQuery code to a Rails 3.2 app? Sunday PM 18:32:14


• Aug 18th, 2012 javascript - jQuery not loading at all Saturday AM 11:10:48

The post Jquery javascript Collapse using $this appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/jquery-javascript-collapse-using-this.html