CODEWITHSUNDEEP
javascriptcss
Ronal Vasquez
Ronal Vasquez

Reputation: 119

Accordion Jquery alignment of text within the header of each tab

I have the following code to display an accordion to me with "jquery"

<div id="accordion">
    <h3>PARA EMPEZAR</h3>
    <div>
        hola 
    </div>

    <h3>SEGUNDO PASO </h3>
    <div>
        Escribe tu texto
    </div>
</div>

the problem is that the title of each tab is between "h3" and I want to put aside some dates right aligned but not how

I want the title of each tab I stay this way: http://s2.subirimagenes.com/otros/previo/thump_8577863tabs.jpg

but not how to align elements aparescan headers like me image. I would appreciate help align the elements

Upvotes: 2

Views: 3670

Answers (1)

Ignat B.
Ignat B.

Reputation: 665

Try to use the following approach:

<div id="accordion">
    <h3>PARA EMPEZAR <span class="date">31-12-2012</span></h3>
    <div>
        hola 
    </div>

    <h3>SEGUNDO PASO <span class="date">31-12-2012</span></h3>
    <div>
        Escribe tu texto
    </div>
</div>

And apply styles:

<style>
    #accodion{
      width: 500px; /*for example */
    }

    #accodion h3{
      display:block;
      text-align:left; /*just to make sure it is*/ 
      width:100%;
      height:50px;
      line-height:50px;
    }

    #accordion span.date{
      float:right;
      line-height:50px;
      text-align:right;
    }
</style>

Upvotes: 3

Related Questions