Using an accordion in a view in codeigniter

Question

Hi,

I am currently building a website in codeigniter that is based around the idea of being a one page, site, I currently have a main view that looks like this,

<?php
    $this->load->view('template/main_menu.php');
    $this->load->view('template/left-content.php');
    $this->load->view('template/right-content.php');
?>

In the right-content view I have a structure that looks like this,

<div id="right-content">
<div id="accordion"></div>

Within another view I have some ajax that populates the #accordion with the returned data, the retruned is placed in its only uniquely id'd div, my question is how to I get this data to then act as an accodion, I have tried the script in both the right-content view and the main view and get no accordion functiontionality, in essence what I currently have when some data has been fetched is this

<div id="right-content">
    <div id="accordion">
        <div class="blog">
            <h2>Blog Header</<h2><!--This should be the click area for the accordion-->
            <p>Content content content content content content content content
            content content content content content content content content content
            content content content contentcontentcontent content content content</p>
           <!--<p> should be hidden unless this accodion is active</p>
    </div>

I think my issue may be that each 'accordion' is being placed in it's own div first, this is not how it is on the accordion example.

Please can someone help me figure this out? Many thanks

Answer 1

You have multiple markup errors in your HTML sample. Several closing tags for <div> are missing.

The closing tag for your h2 is wrong </<h2> instead of </h2>

So I guess you really mean your markup to look like this

<div id="right-content">
    <div id="accordion">
        <div class="blog">
            <!-- Note the additional <a> tag to get the accordion arrows -->
            <h2><a>Blog Header</a></h2>
            <p>Content content content content content content content content
            content content content content content content content content
            content content content content content content content content
            </p>
        </div>
        <div class="blog2">
            <h2><a>Blog Header 2</a></h2>
            <p>Content content content content content content content content
            content content content content content content content content
            content content content content content content content content
            </p>
        </div>
    </div>
</div>

Now all you need to do is to specify the correct header option.

$(document).ready(function() {
    // run your ajax stuff
    // when you are done inserting all the stuff
    // run this (after ajax operations are completed)
    $('#accordion').accordion({header:'h2'});
});

Check this http://jsbin.com/ubiwa for a working example