twitter bootstrap accordion expand by querystring parameter in asp.net

Question

I have twitter bootstrap accordion control which has three rows. What I want to achieve is for example if in the url querystring there is parameter, lets say accordion=1, accordion=2 or accordion3, the appropriate accordion to be expanded on page load. This is the markup I have:

               <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  Accordion One
                        </a>
                      </div>
                      <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
                        <div class="accordion-inner">                                                            
                            <!-- Content One Begin -->

                            <!-- Content One End -->
                        </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                     Accordion Two
                        </a>
                      </div>
                      <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
                        <div class="accordion-inner">
                           <!-- Annuity Policy Content Begin -->                                      

                              <!-- Annuity Policy Content End -->
                        </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                    Accordion Three
                        </a>
                      </div>
                      <div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
                        <div class="accordion-inner">                                                    

                        </div>
                      </div>
                    </div>                                                         
                </div>

Every advice is welcomed, Thanks in advance.

Answer 1

You could create a javascript function to parse the querystring like shown in this SO answer : Parse Querystring. Then, you can call the show action of the collapse module.

// document ready
(function() {
    var qs = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'));

    var id = (qs[accordion] ? qs[accordion] : 1); // default = 1
    $('#accordion' + id).collapse('show');
})();

EDIT: Instead of parsing the querystring in javascript you could simply put the id from the server side (if you are not using ASP.NET MVC, otherwise use kadumel answer).

(function() {
    var id = <%= Request.QueryString["accordion"] %>;
    $('#accordion' + id).collapse('show');
})();

Answer 2

In your controller

Public ViewResult Index(int accordionId)
{
    ViewBag.AccordionId = accordionId;
    return View();
}

In your view

{
@Html.Title = ViewBag.Title;
var accrdId = ViewBag.AccordionId;
}

and then after your accordion loads in your scripts use something like jpmorin said -

$('#accordion' + accrdId).collapse('show');