Question

My HTML:

<div class="menu">
    <a href="javascript:displayonediv('sections1');">Energy Profile</a>
    <a href="javascript:displayonediv('sections2');">Statistics</a>
</div>

<div name="sections" id="sections1">
    .... some stuff ....
</div>
<div name="sections" id="sections2">
    .... some stuff ....
</div>

My JavaScript code:

function displayonediv(choosendiv) {
    $('div[name|="sections"]').each(function(index) {
        if ($(this).attr("id") == choosendiv) {
            $(this).show(200);
        }
        else {
            $(this).hide(200);
        }
    });
}

By default, the div with id=sections1 displays when the page loads while the div with id=sections2 is hidden. In my controller after I submit a form I am redirecting to the div with id=sections2. However, I cannot seem to redirect to that page and load that specific div (id=sections2). I have tried to use anchor tags but my efforts have been in vain.

Answer 1

I think you should do something like this:

Hide all the sections in CSS so that they not even visible during load:

#sections1, #sections2 {
    display: none;
}

The CSS is optional. Use this simple function to do the dynamic show and hide:

function displayonediv(chosendiv) {
    //Make sure all other divs are really hidden if there are subsequent calls:
    $("div[name^=sections]").hide(200);
    $("#" + chosendiv).show(200);
}

Also:

If that doesn’t work and you are able to change that terrible HTML then change the HTML as follows.

<div class="menu">
    <a class="section" href="#sections1">Energy Profile</a>
    <a class="section" href="#sections2">Statistics</a>
</div>

<div class="sections" id="sections1">
    .... some stuff ....
</div>
 <div class="sections" id="sections2">
    .... some stuff ....
</div>

And have this js:

$("a.section").click(function(event) {
    $("div.sections").hide(200);
    $($(this).attr('href')).show(200);
});

As with most things in jQuery, all your code should be $(function(){ /*here*/});.

To make the section load when the page is loaded:

$(function() {
    $(window.location.hash).show(200);
});