Using Bootstrap Collapse with wp_list_categories (to make an accordion)

  • Resolved chrisjb

    (@chrisjb)


    12 years ago

    Hi everyone,

    I’m trying to use Twitter Bootstrap to turn a list of parent categories and their children into an accordion (where the parent categories are the toggle links that expand and collapse the child categories).

    I’m using <?php wp_list_categories('title_li=&child_of=102&show_count=0'); ?> to output:

    <ul>
   <li><a href="#">Parent</a>
         <ul class="children">
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
         </ul>
     </li>
   <li><a href="#">Parent</a>
         <ul class="children">
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
              <li><a href="#">etc</a></li>
         </ul>
     </li>
</ul>

    In order to make this into an accordion, it needs to work like this:

    <ul id="accordion">
   <li><href="#collapseOne" data-toggle="collapse"  data-parent="#accordion" data-target="#demo">Parent</a>
         <ul class="children collapse" id="collapseOne">
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
         </ul>
     </li>
   <li><href="#collapseTwo" data-toggle="collapse" data-target="#demo">Parent</a>
         <ul class="children collapse" id="collapseTwo">
              <li><a href="#">Child</a></li>
              <li><a href="#">Child</a></li>
              <li><a href="#">etc</a></li>
         </ul>
     </li>
</ul>

    I’m starting to think this might not be possible with the wp_list_categories, due to changing the parent category links and using unique ids on each children ul.

    Can anyone recommend a way around this (still using Bootstrap), using another wp function or approach?

    Thank you in advance for your help.

    Cheers,
    Chris

Viewing 1 replies (of 1 total)
  • Thread Starter chrisjb

    (@chrisjb)

    I decided in the end, actually there’s no point going to great lengths to find a way to do this when it’s really easy just to do this:

    <ul class="accordion" id="view-all-guides">
						<li class="accordion-group">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#view-all-guides" href="#collapseOne">North America</a>
							<div id="collapseOne" class="accordion-body collapse">
							  <div class="accordion-inner">
								<ul>
									<?php wp_list_categories('title_li=&child_of=229&show_count=0'); ?>
								</ul>
							  </div>
							</div>
					        </li>
						<li class="accordion-group">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#view-all-guides" href="#collapseTwo">South America</a>
							<div id="collapseTwo" class="accordion-body collapse">
							  <div class="accordion-inner">
								<ul>
									<?php wp_list_categories('title_li=&child_of=230&show_count=0'); ?>
								</ul>
							  </div>
							</div>
					        </li>

    Very stupid of me!

Viewing 1 replies (of 1 total)
  • The topic ‘Using Bootstrap Collapse with wp_list_categories (to make an accordion)’ is closed to new replies.