Меню Jquery Accordion в mvc2 для отображения определенных новостей

Я использую jquery для меню аккордеона, у меня есть окно новостей на моей домашней странице, когда пользователь нажимает на конкретный заголовок новости, он переходит на страницу новостей, где все заголовки новостей заполняются в стиле меню аккордеона, описание новости скрыто, когда пользователь нажимает на заголовок новости, описание новости появляется в стиле аккордеона, в то время как все остальные меню скрыты, виден только заголовок. Я ищу, когда пользователь нажимает на заголовок новости на главной странице, на странице новостей должно отображаться только описание новости, в настоящее время отображаются все заголовки, а описание скрыто в меню аккордеона, я хочу чтобы отображалось описание той новости, которая была нажата на главной странице, в то время как все остальные заголовки новостей должны быть видны, а не описание. Также я использую MVC2.

Я просто не знаю, как внедрить jquery для отображения определенных новостей, которые были нажаты на главной странице. Ниже приведен код, который я использую: news.aspx

<div id="accordion">
    <% foreach (var item in Model)
    { %>
        <h3 class="first">
            <span class="left"><a href="#">
            <%: item.Title %></a></span>
            <span class="green2 right">
            <%: String.Format("{0:dd.MM.yy}", item.DateAdded) %></span>
        </h3>
        <div class="accor_cnt">
            <div class="text">
                <p class="green2 title">
                    <%: item.Title %>
                </p>
                <img src="/content/images/structure/newsdivider.gif" alt="" class="newsdivider" />
                <p class="description">
                    <%: item.Article %>
                </p>
            </div>
            <!--END description-->
            <div class="newsMainimage">
                <img src="/content/images/content/<%: item.ImageLarge %>" alt="" />
            </div>
            <!--END newsMainimage-->
            <div style="clear: both;"></div>
        </div>
        <!--END accor_cnt -->
    <% } %>
</div>

JavaScript на главной странице:

 $(document).ready(function () {

        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content


        //On Click Event
        $("ul.tabs li").click(function () {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });



        $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false
        });

        //FUNCTION FOR SUB ROLLOVER MENU
        $(".monthlybtn img").hover(function () {
            $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
        }, function () {
            $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
        });

    });

CSS:

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 20px; /*--Set height of tabs--*/
    width: 357px;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 20px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 20px; /*--Vertically aligns the text within the tab--*/
    /*border: 1px solid #999; place divider here*/
    border-left: none;
    margin-bottom: 0px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: small;
    padding: 0px 10px;
    /*border: 1px solid #56DB00;  --Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    /*background: #ccc;*/
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #56DB00;
    /*border-bottom: 1px solid #56DB00;*/ /*--Makes the active tab look like it's connected with its content--*/
}


.tab_container {
    border:1px #525453 solid;
    overflow: hidden;
    clear: both;
    float: left; width:357px;
    margin-top:5px;
    background:url(/content/images/structure/upcoming_bg_trans.png) repeat;
}
.tab_content {
    padding: 5px;
    font-size: 11px;
}