javascript toggle script
I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!
jQuery(document).ready(function() {
//hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-togg开发者_如何学运维le').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
jQuery('#slickbox2').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
return false;
});
});
Changed a few points.
$(document).ready(function(){
$('[id*=slickbox]').hide(); //hide your slickboxs
$('#slick-toggle').click(function(){
$('#slickbox').show();
$('#slickbox2').hide();
});
$('#slick-toggle2').click(function(){
$('#slickbox').hide();
$('#slickbox2').show();
});
});
BTW You can use $ in place of jQuery in all of your code:
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
$('#slickbox1').toggle(400);
return false;
});
First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like
<script type="text/javascript">
jQuery(document).ready(function() {
$('.slickbox').hide(); //hides all elements with class slickbox
$('.slickbox').click(function(){
$('.slickbox').hide();
$(this).toggle(400);
})
});
</script>
You can use hide() function to always hide the first content when clicking on the second button
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox').hide(400);
jQuery('#slickbox2').toggle(400);
return false;
});
Don't use toggle or the content will appear if it was hidden
精彩评论