CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Kyle Foreman
Kyle Foreman

Reputation: 5

How do I add other elements to the header of an accordion in JQuery?

I am trying to create an accordion with a header containing a button-esk element that will state the number of items in that section.

EXAMPLE OF THE HEADER I AM TRYING TO CREATE

How would I go about editing/adding to jquery-ui to contain other elements other than the text and icon to the left.

If you could simply point me to the line in the jquery-ui that would suffice.

I am just looking for a hint per say. I am not asking for a build of that "number" element. Just simply where to go to create it myself.

Upvotes: 0

Views: 837

Answers (2)

Tareq Jobayere
Tareq Jobayere

Reputation: 709

<div id="accordion">

  <h3>Section 1    <span class="one">12</span></h3> <!-- these are your accordion header -->
  <div>
    ...
  </div>
  <h3>Section 2  <span class="two">29</span></h3>
  <div>
    ...
  </div>
  <h3>Section 3  <span class="one">can be text</span></h3>
  <div>
    ....
  </div>
</div>

now you have to add 

$( "#accordion" ).accordion();

you can make it more dynamic , where you have to use $.each and if there is list you can get the number of the list and show them .

Upvotes: 1

The F
The F

Reputation: 3714

Have a look at the docs

<div id="accordion">
    <h3>Section 1 <span>**your number section could be here**</span></h3>
    <div>
       <p>foo</p>
    </div>
    <h3>Section 2 <span>**your number section could be here**</span></h3>
    <div>
       <p>foo</p>
    </div>
</div>

Anything inside <h3></h3> will trigger the accordion, if clicked. You can style it using css:

#accordion h3 span { 
    background-color: black;
    color: yellow;
    padding: 5px;
    ....
}

Upvotes: 0

Related Questions