I have a list of navigation items where when one is clicked it's status becomes active

$(document).ready(function() {
    $('li').click(function() {
        $('li').removeClass('active');
        $(this).addClass('active');     
    });
});

I have a container div with multiple hidden divs inside and based on the order of the li that is active I want to be able to show the hidden div that is the same order as the li.

<div class="col-md-9">
    <div id="item1">
        <p>Section#1</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
    <div id="item2">
        <p>Section#2</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
    <div id="item3">
        <p>Section#3</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
</div>

So basically if the second li has the active class then I can have the second of the hidden divs be visible.

Ideally a solution that doesn't involve attaching id's to the li's would be best but I've been having trouble achieving this and would appreciate any help possible.