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';
});
});
