Search jQuery

jQuery Forum

Screen name:
liloscode

liloscode's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Problems whit slideToggle and is(':visible')
[2Replies]
- 24-Mar-2011 03:56 AM
- Forum: Using jQuery
I want to change a value tag (div class='seeMore') ("+ if hidden" & "- if show") depending on the result of the slideToggle jQuery, but I can't even make the slide work. I know that the problem lies in the way of how I call the tag to be Toggle
1. $(this).parents('.seeMoreContainer').next().slideToggle(1000)
But can not find another way to do it because there will be multiple tags with class 'seeMore', so I have to deal with the keyword '(this)' to make the action of slideToggle to that particular div-class='seeMore'

Example HTML:
1. <!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">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>COMPANY NAME</title>
  <link href="cssFinal.css" rel="stylesheet" type="text/css" />
  <link href="productListFinal.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="javaScriptTest.js" type="text/javascript" charset="utf-8"></script>
  </head>
  
  <body>
  
  <div class="parentbox">
  
  <div class="content">
  
      <div class="productListContainer">
        <div class="test" id="ventiladoresRespiradores">
           <h2>PRINCIPAL CATEGORY <span class="plusCategory">(+)</span></h2></div>
        <div class="categoryListContainer">
  
          <div class="productItemContainer">
          <h3>VENTILATOR A</h3>
          <p>COMPANY A<br />
          <a href="#">WWW.COMPANYA.COM</a></p>
          <div class="seeMoreContainer">
              <div class="seeMore">+
              </div>
          </div>
          <div class="productToHide">
          <div class="productImg">
                 <img src="imgProductNew/0001.jpg" width="200" height="164" class="align-left">
          </div>
          <div class="productDescription">
            <ul>
              <li>some text</li>
            </ul>
          </div>
          </div>
          </div>
        </div>
       </div>
       </div>
       </div>
      </body>
  </html>
Here is my jQuery code:
1. $(document).ready(function(){
2. $('.productToHide').hide();
3. $('.seeMore').click(function(){
4. $(this).parents('.seeMoreContainer').next().slideToggle(1000,function(){
5. if($(this).parents('.seeMoreContainer').next().is(':visible')){
6. $('.seeMore').html('-');
7. } else {
8. $('.seeMore').html('+');
9. }
10. });
11. });
12. });
Thanks!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend