I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and then proceeds to click the options button without closing the share content, causing the options content to display below the share content.
My goal is to only show the content for one button at a time. If a user clicks on a button while the other content is still open, it should collapse before displaying the new content.
While I am not very experienced with jQuery, I am unsure of how to address this problem.
If you have any suggestions on optimizing my code, I would greatly appreciate your advice. Thank you.
$('.pull_box_share_triger').click(function() {
if (!collapsed) {
var h = document.getElementById('share_box').Height;
$('#share_box').animate({ height : h+'px' });
$('#share_link_box').css({ display:'inline-block'});
$(".overlay").css({ display:'block'});
$(".pull_box_share_triger").css({ background:'#ffffff' });
$('#share_social_box').css({ display:'inline-block'});
$('.share_button').css({ display : 'inline-block'});
} else {
$('#share_box').animate({height: 'auto'});
$('#share_link_box').css({ display:'none'});
$(".overlay").css({ display : 'none'});
$(".pull_box_share_triger").css({ background:'#f2f2f2'});
$('#share_social_box').css({ display:'none'});
$('.share_button').css({ display : 'none' });
}
collapsed = !collapsed;
});
$('.pull_box_option_triger').click(function() {
if (!collapsed) {
var h = document.getElementById('options_box').Height;
$('#options_box').animate({ height : h+'px' });
$(".overlay").css({ display:'block'});
$(".pull_box_option_triger").css({ background:'#ffffff' });
$(".options_content").css({ display:'inline-block'});
} else {
$('#options_box').animate({height: 'auto'});
$(".overlay").css({ display : 'none'});
$(".pull_box_option_triger").css({ background:'#f2f2f2'});
$(".options_content").css({ display:'none'});
}
collapsed = !collapsed;
});