Databases
StackOverflow2013
Postsdbo
POtab style with javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtab style with javascript
    text
    copied!<p><strong>I have created tab style interface using css and javascript with only two tabs which is working fine.But i want to add more tabs to it and i am not getting how can i write javascript code for it to show current active tab and its contents and hide all other tabs and their contents</strong></p> <hr> <p>Following is my html code :</p> <pre><code>&lt;div id="container"&gt; &lt;div id="tabbox"&gt; &lt;a href="#" id="signup" class="tab signup"&gt;Signup&lt;/a&gt; &lt;a href="#" id="login" class="tab select"&gt;Login&lt;/a&amp;gt; &lt;/div&gt; &lt;div id="panel"&gt; &lt;div id="loginbox"&gt;Login Form&lt;/div&gt; &lt;div id="signupbox"&amp;gt;Signup Form&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <hr> <p>This is my javascript code :</p> <pre><code>$(document).ready(function() { $(".tab").click(function() { var X=$(this).attr('id'); if(X=='signup') { $("#login").removeClass('select'); $("#signup").addClass('select'); $("#loginbox").slideUp(); $("#signupbox").slideDown(); } else { $("#signup").removeClass('select'); $("#login").addClass('select'); $("#signupbox").slideUp(); $("#loginbox").slideDown(); } }); }); </code></pre> <p>This is working fine for two tabs but if i add more tabs to it say :</p> <pre><code>&lt;div id="container"&gt; &lt;div id="tabbox"&gt; &lt;a href="#" id="signup" class="tab signup"&gt;Signup&lt;/a&gt; &lt;a href="#" id="login" class="tab select"&gt;Login&lt;/a&amp;gt; &lt;a href="#" id="basic" class="tab basicinfo"&gt;Basicinfo&lt;/a&gt; &lt;a href="#" id="contact" class="tab contact info"&gt;contactinfo&lt;/a&gt; &lt;/div&gt; &lt;div id="panel"&gt; &lt;div id="loginbox"&gt;Login Form&lt;/div&gt; &lt;div id="signupbox"&amp;gt;Signup Form&lt;/div&gt; &lt;div id="basicbox"&gt;Basic information&lt;/div&gt; &lt;div id="contactbox"&gt;Contact information&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Then if i use previous javascript function i will have to add lot more lines to it and i am not getting how can i do it in short and simple way. What changes do i have to make in my javascript function..</strong></p>
 

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