JQuery Help: toggle() is not working properly
- by John Smith
Hi All,
I'm trying to use JQuery toggle functionality, but not able to use properly. Instead of smooth slide up and down, it goes very fast and not in an animated manner.
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() {
document.getElementById('imgFeaturesCol').style.display = 'none';
document.getElementById('imgTechnoCol').style.display = 'none';
$('#imgFeaturesEx').click(function() {
$.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
document.getElementById('divMain').innerHTML = strInfo;
});
$("#divMain").toggle("slow");
document.getElementById('imgFeaturesEx').style.display = 'none';
document.getElementById('imgFeaturesCol').style.display = 'block';
});
$('#imgFeaturesCol').click(function() {
document.getElementById('divMain').innerHTML = "";
$("#divMain").toggle("slow");
document.getElementById('imgFeaturesCol').style.display = 'none';
document.getElementById('imgFeaturesEx').style.display = 'block';
});
$('#imgTechnoEx').click(function() {
$.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
document.getElementById('divTechnossus').innerHTML = strInfo;
});
$("#divTechnossus").slideToggle("slow");
document.getElementById('imgTechnoEx').style.display = 'none';
document.getElementById('imgTechnoCol').style.display = 'block';
});
$('#imgTechnoCol').click(function() {
document.getElementById('divTechnossus').innerHTML = "";
$("#divTechnossus").slideToggle("slow");
document.getElementById('imgTechnoCol').style.display = 'none';
document.getElementById('imgTechnoEx').style.display = 'block';
});
});
