There is a working code in jQuery, which, I think, can be optimized due to the if and else . However, I could not do it, I hope for your help. Code example:

 $(document).ready(function() { $("#female").click(function() { $("#showFemale").show(); $("#showMale").hide(); $("#who").hide(); }); }); $(document).ready(function() { $("#male").click(function() { $("#showMale").show(); $("#showFemale").hide(); $("#who").hide(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showFemale">showFemale</div> <div id="showMale">showMale</div> <div id="who">who</div> <button id="female" val="female">female</button> <button id="male" val="male">male</button>

  • and how did you try? - Grundy

2 answers 2

Something like this

 $("#female").click(function() { toggleIds(true); }); $("#male").click(function() { toggleIds(false); }); var toggleIds = function(show){ $("#showFemale").toggle(show); $("#showMale").toggle(!show); $("#who").hide(); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showFemale">showFemale</div> <div id="showMale">showMale</div> <div id="who">who</div> <button id="female" val="female">female</button> <button id="male" val="male">male</button>

    Based on @Moonvvell

     $("#male, #female").click(function() { var isMale = this.id === "male"; $("#showFemale").toggle(!isMale); $("#showMale").toggle(isMale); $("#who").hide(); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showFemale">showFemale</div> <div id="showMale">showMale</div> <div id="who">who</div> <button id="female" val="female">female</button> <button id="male" val="male">male</button>