CSS Divide Page into Sections

We can divide the page into different sections using CSS and JQuery in the same page without calling server side. I load the elements in the first section by default.

In this example, I have 2 sections, but you can do more with the structure:

1. First section

• Label “Elements in Section1"
• DropdownList

2. Second section

• Label “Elements in Section2"
• Button

Firstly, you need to set the styles:

.linkSelected {
   font-weight: bold;
   }
.linkNotSelected {
   font-weight: normal;
   cursor: pointer;
   }
.linkNotSelected:hover {
   text-decoration: underline;
   cursor: pointer;
   }
div.dummyDiv {
   clear: both;
   height: 1px;
   }

Secondly, you need to set the events when user clicks and hide or show the divs:

function showSection1() {
    $("#divSection1").show();
    $("#divSection2").hide();

    $('#spanSection2').removeClass("linkSelected").addClass("linkNotSelected");
    $('#spanSection1').removeClass("linkNotSelected").addClass("linkSelected");
}

function showSection2() {
    $("#divSection2").show();
    $("#divSection1").hide();

    $('#spanSection1').removeClass("linkSelected").addClass("linkNotSelected");
    $('#spanSection2').removeClass("linkNotSelected").addClass("linkSelected");
}

The HTML I have used is this:

<div style="background-color: #08088A; width: 99%; margin-bottom: 2px; clear: both;
    font: 18px/21px 'ms sans serif',sans-serif;">
    <span id="spanSection1" class="linkSelected" style="color: White; float: left;
        width: 150px;" onclick="showSection1();">
        <asp:Label ID="Label2" runat="server"
        Style="color: White; padding-left: 5px;" Text="First Section"></asp:Label>
    </span>
    <span id="spanSection2" class="linkNotSelected" style="color: White; float: left;
        width: 150px;" onclick="showSection2();">
        <asp:Label ID="Label14" runat="server"
        Style="color: White; padding-left: 5px;" Text="Second Section"></asp:Label>
    </span>
    <div class="dummyDiv">
    </div>
</div>

<div style="padding-bottom: 10px;" id="divSection1">
    <label>Elements in Section 1 </label>
    <asp:DropDownList ID="DropDownList1" runat="server" Width="120px">
        <asp:ListItem Text="Choose ..."></asp:ListItem>
    </asp:DropDownList>
</div>

<div style="padding-bottom: 10px; display: none;" id="divSection2">
    <label>Elements in Section 2 </label>
       <asp:Button ID="Button1" runat="server" Text="Button" />
</div> 

If this post helped you, please leave a comment. Originally posted here.

Filed under: CodeProject, CSS, jquery