Question

I’m writing a user account page where users can change their settings, and the page consists of tabs at the top where users click, and the content section of the page updates to display that part of their settings.

HTML code (just the content part):

<div id="content_navigation">Navigation menu with buttons, etc...</div>
<div id="pass_settings">
   <p>Password settings page</p>
</div>
<div id="email_settings">
   <p>Email settings page</p>
</div>
<div id="delete_account">
   <p>Delete account page</p>
</div>

The problem I have is that I want each jQuery event that I have bound to a button in the navigation menu to hide all but a specific div from the settings.

For example, if they click on the “Password” button, it’ll hide everything but the password menu.

I know about code like this:

$('div:not(#myDiv)').hide();  // hide everything that isn't #myDiv

but that applies to every div in the document. I only want it to hide all but one, within this specific section. Is there a way to do this without throwing in yet another div to wrap around them?

Answer 1

Classes surely exist for this purpose.

HTML:

<div id="content_navigation">Navigation menu with buttons, etc...</div>

<div class="content" id="pass_settings">
   <p>Password settings page</p>
</div>
<div class="content" id="email_settings">
   <p>Email settings page</p>
</div>
<div class="content" id="delete_account">
   <p>Delete account page</p>
</div>

JS:

$('div.content').hide();
$('div.content#myDiv').show();
   // ^ (this selector could be terser, but I'm demoing)