Jquery Accordion menu in mvc2 to display particular news

Question

I am using jquery for accordion menu, I have got a news box on my home page, when user clicks on the particular news title, it navigates to news page, where all the news title are populated to accordion menu's style, the news description is hidden, when the user click on the title of the news the news description comes out in accordion style, while all the other menus are hidden, just the title is visible. What I am looking for is when the user click on the title of the news on the home page, only that news description should be displayed on the news page, currently all the titles are shown and description is hidden in the accordion menu, I want to display the description of that news to be visible which was clicked in the home page while all other news title should be visible not the description. Also I'm using MVC2.

I just dunno how to inject jquery to display certain news which was clicked on the homepage, Below is the code which I am using : 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 on master page:

 $(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;
}

Answer 1

First you will have to pass an extra parameter in the Request when the user navigates from the home page to news page in the url.(some id of the news ) and you'll have to figure out the index of that news item in the accordion and make the state of that to active..

Here is some code..

$(document).ready(function(){ 
         var newsID = getParameterByName("newsID");
         var newsIndex = getNewsIndesByID(newsID);
         //this you'll have to figure out
         $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false,
            active:newsIndex 
        });   
      });

function getParameterByName(name) {      
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
         return "";
         else
        return decodeURIComponent(results[1].replace(/\+/g, " "));    
}` 

You may consider storing the ID+index of the news in the some hidden field and get the index there by.. All the best