Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
s_macs_mac 

jquery in visual force page

i have a visual force page with four div's each div has a header and when the vf page loads intially i want only the headers to be viewed intially and on  clicking  the expand(+) in each div i want the content,and collapse(-) be viewed.How to achieve this expand and collapse of divs using jquery on clicking the images(+) to expand and (-) to collapse.Please help.Thanks in advancew1
SFDC_DevloperSFDC_Devloper
Hi,

Create a HTML structure like this :
<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
        </ul>
    </div>
</div>

With this CSS: (This is to hide the .content stuff when the page loads.

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

Using jQuery, write a click event for the header.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Thanks,
Rockzz
Manoj.mjManoj.mj
Hi ,
I am trying the same code as yours but its not working as expected for me ....Can u please guide me in this .On clicking header the function is not being called i dont know why.My code is 
<apex:page >
    <apex:includeScript value="{!$Resource.jqueryCollapse}"/>
    <apex:includeScript value="{!$Resource.jqueryCollapse1}"/>
    <apex:includeScript value="{!$Resource.jqueryCollapse2}"/>
    <apex:includeScript value="{!$Resource.jquerycollapse21}"/>
    <script type="text/javascript">
    $(".header").click(function () {
    alert("loop");

    $header = $(this);
   
    $content = $header.next();
    
    $content.slideToggle(500, function () {
      
       
        $header.text(function () {
           
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});</script>
    
<style>   
.container .content {
    display: none;
    padding : 5px;
}</style>
    <div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
            <li>This is just some SFDC content.</li>
        </ul>
    </div>
</div>
</apex:page>
raghu babu 10raghu babu 10
Hi Manoj.mj, please share static resource files (jqueryCollapse, jqueryCollapse1, jqueryCollapse2 &jqueryCollapse21).