Могу ли я разместить php включает в меню аккордеона jquery?

Во-первых, все еще изучая, так как я иду так, js является для меня совершенно новым, и это моя первая попытка jquery, поэтому, если это кажется основным, извините.

Было высказано предположение, что решение для моего меню боковой панели было бы лучше, чем js или jquery, и следуя советам, которые я собрал вместе ниже jsfiddle: http://jsfiddle.net/q4Zyv/4/

В целом он работает, но я пытаюсь определить, что делать дальше. Первое меню (и подменю) будет галереей, и я хочу показать 12 черепичных изображений. Я могу просто отбросить изображения в ли, но я думал, что было бы неплохо сделать, чтобы настроить мои изображения как php, так как я хочу добавить больше, чем только 12 на категорию позже с помощью массива или другого метода.

Исходя из этого, могу ли я добавить include в li? Не мешает ли функция jquery и способ ее вызова. Любые рекомендации? Я хочу получить это как можно скорее, даже в качестве заполнителя, в то время как я узнаю больше и уточню позже. Вот код, приведенный выше:

body {
    background-color:#161616;
    padding:0px;
    margin:0px;
}
#nestedAccordion {
    width:20%;
    min-width:200px;
    float:right;
    text-align:right;
}
#nestedAccordion h2, #nestedAccordion h3, #nestedAccordion div, #nestedAccordion ul, #nestedAccordion li {
    /* reset styles for accordion */
    margin:0;
    padding:0;
    font-size:14px;
    font-weight:strong;
    list-style:circle;
    font-family:arial;
}
#nestedAccordion div {
    display:none;
    color:#121212;
    overflow:hidden;
}
#nestedAccordion h2 {
    cursor:pointer;
    color:#ffffff;
    font-size:14px;
    padding:5px;
    margin:0px;
    background-color: #2d2d2d;
    border-top: #161616 1px solid;
}
#nestedAccordion h2:hover {
    background-color:#c569f2;
}
#nestedAccordion h3 {
    cursor:pointer;
    padding:5px;
    color: #ffffff;
    background-color: #3d3d3d;
}
#nestedAccordion h3:hover {
    background-color:#c569f2;
}
#nestedAccordion h3 + div {
    background-color:#4d4d4d;
    color:#ffffff;
    padding:5px 5px 5px 5px;
}
#nestedAccordion ul {
    padding:0px;
    margin:-5px;
}
#nestedAccordion li {
    color:#ffffff;
}
#nestedAccordion li div {
    width:100%;
    min-width:200px;
    height:400px;
    padding:0px;
    margin:0px;
}
#nestedAccordion li:hover {
    background-color:#c569f2;
    cursor:pointer;
}


$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div');

    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="nestedAccordion">

<h2>Portfolio</h2>

    <div>
            <h3>Branding</h3>

        <div>
            <ul>
                <li>Div/PHP goes here... calling 12 thumbnails</li>
            </ul>
        </div>
            <h3>Publications</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
            <h3>Online</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
            <h3>Advertisments</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
<h3>Displays</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>

<h3>Packaging</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
    </div>

<h2>Blog</h2>

    <div>
            <ul style="margin:0px;">
                <li>entry 1</li>
                <li>entry 2</li>
            </ul>

    </div>
<h2>About</h2>

    <div>
 <!--           <h3>Production Central</h3>

        <div>-->
            <ul style="margin:0px;">
                <li>About</li>
                <li>Resume</li>
                <li>Accolades</li>
                <li>Contact</li>
            </ul>
    </div>
</div>