+ Start a Discussion
Manoj.mjManoj.mj 

jquery slidetoggle() function not working on button click

Hi all,
              I am developing a customized expand and collapse function for a visualforce page,But the function slidetoggle()  not working can anyone guide me in this .ANd my code is the code is not entering into slide toggle function (),i searched lot of blogs i couldnt find solution.And this will be dynamic .
<apex:page >
   <apex:includeScript value="{!$Resource.jqueryCollapse}"/>
     <apex:includeScript value="{!$Resource.jqueryCollapse1}"/>
   <apex:includeScript value="{!$Resource.jqueryCollapse2}"/>
   <apex:includeScript value="{!$Resource.jquerycollapse21}"/>
   <apex:form >
   <html>
   <head>

   <script type="text/javascript">
    var j$ = jQuery.noConflict();
j$(document).ready(function($){   
   j$(function(){

   j$(".header").click(function () {    
   alert("Loopafe");
    j$header = $(this);   
     alert("Loopafe1");
    j$content = j$header.next();   
     alert("Loopafe"+content); 
    j$content.slideToggle(100, function () {  
     alert("toggle");     
             j$header.text(function () {           
             return j$content.is(":visible") ?j$(this).attr("src", "https://XxxxX.visual.force.com/resource/1404298250000/Minus") : j$(this).attr("src", "https://xXX.visual.force.com/resource/140xxx298250000/plusimg");
        }); 
    });    
}); 
}); 
});
</script>
  <style> 
    .container .content {
  display: none;
 padding : 5px;
 }
</style>
</head>
<apex:pageBlock >
<apex:pageBlockSection columns="10" collapsible="True" >           
   
            <img src="https://xxx1.visual.force.com/resource/140xxxx50000/plusimg" class="header" />
             <apex:outputText value="First" id="theFirst"/>
            <apex:InputText />
        </apex:pageBlockSection> 
  </apex:pageBlock>
   <div class="container">
          <div class="content">
             <apex:pageBlock >
               <apex:pageBlockSection columns="5"  >
                   <apex:outputLabel value="Collapse"  id="theSecond1"/>
                   <apex:inputText /> 
               </apex:pageBlockSection>               
           </apex:pageBlock>
       </div>
  </div>
              
 
 <body>


</body>
</html>

</apex:form>
</apex:page>

@LaceySnr - Matt Lacey@LaceySnr - Matt Lacey
Try removing "j$(document).ready(function($){ " and it's closing line and just using "j$(function(){" which should work fine on it's own.

As a side point it seems like you're hardcoding some IDs and code that uses them is going to break when deployed to another org. You should be using the {!URLFOR($Resource.StaticResourceName, 'fileInZip')} notation (unless you're showing the generated code here but that doesn't appear to be the case).