Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
❤Code❤Code 

JQuery silder toggle

Hi All,

I am trying to create a toggle slider using JQuery in vf page. As a result my entire page is disappering when i click the link. Someone guide me where it is going wrong..

<apex:page sidebar="false">
   <link rel="stylesheet" href="{!URLFOR($Resource.slider, '/css/style.css')}" type="text/css" media="screen" />
   <link rel="stylesheet" href="{!URLFOR($Resource.slider, '/css/slide.css')}" type="text/css" media="screen" />
   
   <script src="{!URLFOR($Resource.slider, '/js/jquery-1.3.2.min.js')}" type="text/javascript"></script>
   <script src="{!URLFOR($Resource.slider, '/js/slide.js')}" type="text/javascript"></script>
   <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
   
     <script> 
$(document).ready(function(){
    $(".button").click(function(){
        $("div").animate({
            height: 'toggle'
            
        });
    });
});
  </script>
<a href="javascript:void(0)" class="button" id="users_id">add as a friend</a>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</apex:page>
NekosanNekosan
I found this link https://forums.adobe.com/thread/1453381?tstart=0
This might help you to solve your issue.
Dushyant SonwarDushyant Sonwar
I think you should give your div a unique id as your animate method will applicable to all the divs and that is why i think the page is disappearing..
<div id="uniqueid"style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

and in your script try this
$(document).ready(function(){
    $(".button").click(function(){
        $("#uniqueid").animate({
            height: 'toggle'           
        });
    });
});