Hi all,
I'm trying to use JQuery Slidetoggle functionality, but not able to use properly.
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.
I want to achieve sliding effect in my code, like this has (Please see Website Design, Redesign Services slider):
Here is my code:
HTML:
<div>
<div class="jquery_inner_mid">
<div class="main_heading">
<a href="#">
<img src="features.jpg" alt="" title="" border="0" /></a>
</div>
<div class="plus_sign">
<img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" />
<img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
<div class="toggle_container">
<div id="divMain" >
</div>
</div>
</div>
<div class="jquery_inner_mid">
<div class="main_heading">
<img src="About.jpg" alt="" title="" /></div>
<div class="plus_sign">
<img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" />
<img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
<div class="toggle_container">
<div id="divTechnossus" >
</div>
</div>
</div>
</div>
JQuery:
$(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'
});
}
