I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functionality through JavaScript (source: "DIV moving up and down using javascript").
However, I have encountered a challenge. Is there a way to reset the JavaScript when either the "search" or "account" button is clicked? Currently, if one button has been activated and then you click the other, you need to click twice on the initial button to trigger the action again. Please refer to the provided jsfiddle link for clarity: [https://jsfiddle.net/27jaodcg][1]
The current behavior is that clicking on the "account" button will close the search bar, and clicking on the search bar will close the account bar, which works perfectly for a single interaction.
However, if the account button has been clicked previously, the script assumes the account bar is still open. Therefore, when clicking on the search button, it closes the account bar first, but since it's already closed by the search button click, nothing happens when clicking on the account button again.
I hope this explanation clarifies the situation :)
Below is the existing JavaScript jQuery code:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
// Account button actions when already open
} else {
// Account button actions when closed
}
});
$("#searchid").on('click',function(){
if($(this).hasClass('open')) {
// Search button actions when already open
} else {
// Search button actions when closed
}
});
});
Thank you in advance for any insights!