Show/Hide Buttons - How to Hide a Button when another Button is Clicked | XM Community
Skip to main content
Michael_Cooksey
Administrator
25 days ago

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

  • January 19, 2023
  • 4 replies
  • 10831 views
RoseL
Level 1 ●
Forum|alt.badge.img+10
  • RoseL
  • Level 1 ●
  • 29 replies

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
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • grahulp5
  • QPN Level 3 ●●●
  • 238 replies
  • January 19, 2023

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
Level 1 ●
Forum|alt.badge.img+10
  • RoseL
  • Author
  • Level 1 ●
  • 29 replies
  • January 19, 2023

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
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • grahulp5
  • QPN Level 3 ●●●
  • 238 replies
  • January 19, 2023

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
Level 1 ●
Forum|alt.badge.img+10
  • RoseL
  • Author
  • Level 1 ●
  • 29 replies
  • January 19, 2023

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

Leave a Reply


Terms & Conditions