WordPress.org

Support

Support » How-To and Troubleshooting » Display WP Pages as Twitter Bootstrap Accordion

Display WP Pages as Twitter Bootstrap Accordion

  • rodneyovesta
    Member

    @rodneyovesta

    I’m new to WordPress and PHP and need a bit of help coding the main navigation for my portfolio site.

    My main navigation uses the Twitter Bootstrap accordion function to show and hide desired content. My goal is to get the wp pages to behave as the accordion groups, where the .accordion-heading references the page title and .accordion-inner references the content of that page

    Here is example markup of a single accordion group:

    <div class="accordion" id="accordion2">
    
        <div class="accordion-group">
            <div class="accordion-heading">
    	    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#about">
                    about
    	    </a>
    	</div>
    	<div id="about" class="accordion-body collapse">
    	    <div class="accordion-inner">
    	        ...content...
    	    </div>
    	</div>
        </div>
    
    </div><!-- /.accordion#accordion2 -->

    I assume this requires some loops and manipulation of the wp_list_pages() function, so all help is welcome.

  • The topic ‘Display WP Pages as Twitter Bootstrap Accordion’ is closed to new replies.