Show/Hide Buttons - How to Hide a Button when another Button is Clicked | XM Community

Show/Hide Buttons - How to Hide a Button when another Button is Clicked

  • 19 January 2023
  • 4 replies
  • 6562 views
RoseL
Rank
Badge +10

I have searched the community and haven't found the answer I am looking for.
I followed TomG's post (https://community.qualtrics.com/XMcommunity/discussion/comment/42451#Comment_42451) to create 3 show/hide buttons in my form for a conference.
I was able to get all 3 buttons to work perfectly but they all remain open when you click on each one, therefore, you need to click the button to close it.
Is there a way to close the "open button" when I select another button? For example, button 1 is open, when I click on button 2, I would like button 1 to close and see the text under button 2, etc.
Here is my JS Code:
js code.pngHere is my HTML for the 3 buttons:



      

Here is my HTML code for each button div:

Any help would be greatly appreciated.
Thanks, Rosemarie

4 replies

grahulp5
Rank
Userlevel 4
Badge +13

You can just use the class/id of the button and then using JS use .css('display','none') to hide or .hide() for the same.
Hope this helps!

RoseL
Rank
Badge +10

Thank you for your response, grahulp5.
I added the JS and now the buttons don't open. I am not an expert with JS so I may not be doing this correctly.
code2.png

grahulp5
Rank
Userlevel 4
Badge +13

Let's say that you'd like to hide a paragraph with class/ID as p on press of the button, then the code would look something like below.
 jQuery("button").click(function(){
  jQuery("p").toggle();
 });
Please call the function in onReady. Also, you can learn more about this on the below url. Hope it helps
https://www.w3schools.com/jquery/eff_toggle.asp

RoseL
Rank
Badge +10

Great, thank you grahulp5, I appreciate your help on this! Rosemarie

Leave a Reply


Terms & Conditions