Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Help: slidetoggle() is not working properly
    primarykey
    data
    text
    <p>I'm trying to use JQuery Slidetoggle functionality, but not able to use properly.<br> The problem I'm currently facing is my div is sliding down on the click of slide image icon, but after that suddenly data div (in which data is loading) disappears. Means sliding down is perfect but div (in which data is loading , here #divMain) is not visible after that.<br> I want to achieve sliding effect in my code, like <a href="http://www.networksolutions.com/design-develop/design-services.jsp" rel="nofollow noreferrer">this</a> has (Please see Website Design, Redesign Services slider): </p> <p>Here is my code:</p> <p>HTML: </p> <pre><code>&lt;div&gt; &lt;div class="jquery_inner_mid"&gt; &lt;div class="main_heading"&gt; &lt;a href="#"&gt; &lt;img src="features.jpg" alt="" title="" border="0" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="plus_sign"&gt; &lt;img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" /&gt; &lt;img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /&gt;&lt;/div&gt; &lt;div class="toggle_container"&gt; &lt;div id="divMain" &gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="jquery_inner_mid"&gt; &lt;div class="main_heading"&gt; &lt;img src="About.jpg" alt="" title="" /&gt;&lt;/div&gt; &lt;div class="plus_sign"&gt; &lt;img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" /&gt; &lt;img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /&gt;&lt;/div&gt; &lt;div class="toggle_container"&gt; &lt;div id="divTechnossus" &gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JQuery:</p> <pre><code> $(function() { $('#imgFeaturesCol').hide(); $('#imgTechnoCol').hide(); $('#imgFeaturesEx').click(function() { $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) { $('#divMain').html(strInfo).slideToggle("slow"); LoadDiv(); }); $('#imgFeaturesEx').hide(); $('#imgFeaturesCol').show(); }); $('#imgFeaturesCol').click(function() { $('#divMain').html("").slideToggle("slow"); $('#imgFeaturesCol').hide(); $('#imgFeaturesEx').show(); }); $('#imgTechnoEx').click(function() { $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) { $('#divTechnossus').html(strInfo).slideToggle("slow"); }); $('#imgTechnoEx').hide(); $('#imgTechnoCol').show(); }); $('#imgTechnoCol').click(function() { $('#divTechnossus').html("").slideToggle("slow"); $('#imgTechnoCol').hide(); $('#imgTechnoEx').show(); }); })(); function LoadDiv() { $('#s4').cycle({ speed: 200, timeout: 0, pager: '#nav' }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload