jquery define tabs with content

Question

I like to use JQuery for creating tabs. My issue is all jquery tab definitions follow this design.

<div>  
<h4>Heading</h4>  
  <div>  
    <ul>  
     <li><a>Tab 1</a></li>  
     <li><a>Tab 2</a></li>  
     <li><a>Tab 3</a></li>  
    </ul>  
     <div>Content for Tab 1</div>  
     <div>Content for Tab 2</div>  
     <div>Content for Tab 3</div>  
  </div>  
</div>

However, I need a design like this:

<div>  
  <h4>Heading</h4>  
  <div>  

    <div><a>Tab 1</a></div>
    <div>Content for Tab 1</div>  

    <div><a>Tab 2</a></div>  
    <div>Content for Tab 2</div>  

    <div><a>Tab 3</a></div>  
    <div>Content for Tab 3</div>  

  </div>  
</div>

Is the above design possible?

Also, I need the tabs to be recognised by css class and not ids (since I create tabs dynamically through code). Is this possible too?

Update: Thanks for all the great minds who helped me, I'm able to establish what I wanted. I have used the inputs from the below posts and improved them for placing multiple tabs in a page.

Find the demo here: http://jsfiddle.net/sunalive/VHPwP/12/

Ahsan Rathod · Accepted Answer · 2012-06-20 07:47:58Z

1

See working example here:

http://jsfiddle.net/rathoreahsan/q7Lqq/

HTML CODE:

    <div class="contents-wrapper">  
          <h4>Heading</h4>  
          <div class="tabs-container">  

              <div class="tabs"><a>Tab 1</a></div>
              <div class="contents" style="display:block">Content for Tab 1</div>  

              <div class="tabs"><a>Tab 2</a></div>  
              <div class="contents">Content for Tab 2</div>  

              <div class="tabs"><a>Tab 3</a></div>  
              <div class="contents">Content for Tab 3</div>  

          </div>  
    </div>

JQUERY

    $('.tabs').click(function(){
        $(this).parent().find('.contents').hide();
        $(this).next().show();
    });

CSS

    .contents-wrapper{
        width: 222px;
        font-family: tahoma;
    }

    h4 {
       height: 40px;
       line-height: 40px;
       background: #666;
       color: #fff;
       font-size: 26px;
       padding: 0 15px;
    }

   .tabs-container { position: relative; }

   .tabs {
       float:left;
       background: #ccc;
       height: 30px;
       line-height: 30px;
       padding: 0 16px;
       border-right:1px solid #666;
       border-bottom:1px solid #666;
       cursor: pointer;
    }

    .tabs:hover { background: #f4f4f4; }

    .contents {
       position: absolute;
       margin-top: 31px;
       padding: 15px;
       border: 1px solid #ccc;
       width: 190px;
       font-size: 12px;
       font-weight:bold;
       display: none;
     }

Hope it will be helpful. Thanks!

edited Jun 20, 2012 at 7:47

answered Jun 20, 2012 at 7:40

Ahsan Rathod

5,5252 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ravi Over a year ago

Thank you so much. This is working right away. It is also working for nested tabs. However, the nested content div overflows the parent content div (because of the positon: absolute property). Tried changing it, but changing distorts the tab placement. I would like the parent div adjusting itself to the total height according to content. Can you please help me with this too?

Ahsan Rathod Over a year ago

Ravi, I am not good in Programming (Logic), Kindly see this demo: jsfiddle.net/rathoreahsan/Gfxvk if you are good in programming so you can achieve this in your own way. In this demo I want to select every 4rth tab and on behalf of that i want to add 31px from top for contents div. That's all

Ravi Over a year ago

Thanks Ahsan. I figured a way out of it.

Ravi Over a year ago

Updated my question with a link to the solution.

Holger D. Schauf · Accepted Answer · 2012-06-20 06:36:34Z

1

add some classes :-)

<div>  
  <h4>Heading</h4>  
  <div class="parent">  

    <div class="link"><a>Tab 1</a></div>
    <div class="content">Content for Tab 1</div>  

    <div class="link"><a>Tab 2</a></div>  
    <div class="content">Content for Tab 2</div>  

    <div class="link"><a>Tab 3</a></div>  
    <div class="content">Content for Tab 3</div>  

  </div>  
</div>  



$('.link').click(function() {
    $(this).parent().find('.content').hide();
    $(this).next().show();
});

or

$('.link').click(function() {
    $(this).parent().find('.content').hide().end().next().show();
});

answered Jun 20, 2012 at 6:36

Holger D. Schauf

1473 bronze badges

1 Comment

Ravi Over a year ago

This seems to be the one I need. I'll try this today. Thanks.

Jagz S · Accepted Answer · 2012-06-20 06:39:32Z

0

Below are links for creating tabs dynamically:

http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/

http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx

answered Jun 20, 2012 at 6:39

Jagz S

9073 gold badges12 silver badges29 bronze badges

Collectives™ on Stack Overflow

jquery define tabs with content

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related