Need a bit of help

Need a bit of help

Hi All,

I would like to say thank for any help in advance so the problem:
I have a list item as follows
  1. <ul>
                    <!-- Row 1:start-->
                    <li class="mid-grey">
                        <div class="block">
                            <div class="active">
                                <h2>Example 1</h2>
                                <span class="time">July 2 2013</span>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                <a href="#" class="block-toggle"><button></button></a>
                            </div>
                            <div class="hidden">
                                <a href="#" class="block-close"><button></button></a>
                                <h3>Example Heading 1</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="active">
                                <span class="time">July 2 2013</span>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                <a href="#" class="block-toggle"><button></button></a>
                            </div>
                            <div class="hidden">
                                <a href="#" class="block-close"><button></button></a>
                                <h3>Example Heading 2</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                               
                            </div>
                        </div>
                    </li></ul>




































The jQuery is as follows:
  1. $(document).ready(function($){

        $(".block-toggle,.block-toggle-alt").click(function(e){
            e.preventDefault();
            var parent = $(this).parents("li");
            var hidden = parent.find('.hidden');
            var defaultBlock = parent.find('.block');

            if(hidden.is(':visible')){
                hidden.animate({'width':0+'%'},100,function(){
                    defaultBlock.removeClass("active");
                    hidden.hide();
                })
            }else{

                $('.block').removeClass("active");
                $('.hidden').not(hidden).animate({'width':0+'%'},100,function(){
                $(this).hide();
            })
               
                if(parseInt($("#wrapper").width())<=300){
                    hidden.css({'width':0+'%'}).show().animate({'width':100+'%', 'height':100+'%'},100);
                    defaultBlock.addClass("active");
                    console.log($("#wrapper").width());
                }else{
                    hidden.css({'width':0+'%'}).show().animate({'width':200+'%', 'height':100+'%'},100);
                    defaultBlock.addClass("active");

                    if($(this).parents("li").hasClass( "mid" )){
                        hidden.css({'width':0+'%'}).show().animate({'width':100+'%', 'height':100+'%'},100);
                    }
                    console.log($("#wrapper").width());
                }
            }
        });
       

        $(".block-close").click(function(e){
            e.preventDefault();
            $(this).parents("li").find(".hidden").animate({'width':0+'%'},100,function(){
                    $(this).hide();
                })
                var curTooltip = $(this).parents(".tooltip");
                var curArrow = curTooltip.parents("li").find(".arrow");
                if(curTooltip.is(":visible")){
                    curArrow.fadeOut('fast');
                    curTooltip.fadeOut();
                }else{
                    $(".tooltip").hide();
                    $(".arrow").hide();
                    curTooltip.fadeIn(function(){
                        curArrow.fadeIn('fast');
                    });
                }
        });
        $(".block > ul > li").mouseleave(function(){

        });
       
        $(".show-on-load").show();
    });



























































This issue is both hidden div open at the same time I am trying to make each div open separately but don't want to hard code it as the list is big.

Thanks for any help.