Databases
StackOverflow2013
Postsdbo
POHow would i go about shortening this code? And to cancel the previous click on click of new section?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow would i go about shortening this code? And to cancel the previous click on click of new section?
    text
    copied!<p>My code below basically changes the image for people in a team sector, but as you can see theres alot of repeated code; is there a way to shorten it?</p> <p>Also it currently, allows you to click on all sections without turning off the previously clicked one; i assume this is to do with the toggle() function, but i couldn't get it to work any other way! still quite new to jquery coding, so any help with that would be grand!!</p> <p>Cheers in advance!</p> <pre><code>$("#team_client_services").click(function () { if ($(".team_client_services").hasClass("team_hide")) { $(".team_client_services").toggleClass("team_hide"); $(".team_client_services2").toggleClass("team_show"); } else { $(".team_client_services").toggleClass("team_hide"); $(".team_client_services2").toggleClass("team_show"); }; }); $("#team_management").click(function () { if ($(".team_management").hasClass("team_hide")) { $(".team_management").toggleClass("team_hide"); $(".team_management2").toggleClass("team_show"); } else { $(".team_management").toggleClass("team_hide"); $(".team_management2").toggleClass("team_show"); }; }); $("#team_products").click(function () { if ($(".team_products").hasClass("team_hide")) { $(".team_products").toggleClass("team_hide"); $(".team_products2").toggleClass("team_show"); } else { $(".team_products").toggleClass("team_hide"); $(".team_products2").toggleClass("team_show"); }; }); $("#team_technical").click(function () { if ($(".team_technical").hasClass("team_hide")) { $(".team_technical").toggleClass("team_hide"); $(".team_technical2").toggleClass("team_show"); } else { $(".team_technical").toggleClass("team_hide"); $(".team_technical2").toggleClass("team_show"); }; }); $("#team_accounts").click(function () { if ($(".team_accounts").hasClass("team_hide")) { $(".team_accounts").toggleClass("team_hide"); $(".team_accounts2").toggleClass("team_show"); } else { $(".team_accounts").toggleClass("team_hide"); $(".team_accounts2").toggleClass("team_show"); }; }); $("#team_admin").click(function () { if ($(".team_admin").hasClass("team_hide")) { $(".team_admin").toggleClass("team_hide"); $(".team_admin2").toggleClass("team_show"); } else { $(".team_admin").toggleClass("team_hide"); $(".team_admin2").toggleClass("team_show"); }; }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload