Problems whit slideToggle and is(':visible')

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

$(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:

<!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:

$(document).ready(function(){
$('.productToHide').hide();
$('.seeMore').click(function(){
$(this).parents('.seeMoreContainer').next().slideToggle(1000,function(){
if($(this).parents('.seeMoreContainer').next().is(':visible')){
$('.seeMore').html('-');
} else {
$('.seeMore').html('+');
}
});
});
});

Thanks!

Topic Participants
ownreports
jay.blanchard

Problems whit slideToggle and is(':visible')

Problems whit slideToggle and is(':visible')

Topic Participants

ownreports

jay.blanchard