Click here to Skip to main content
14,424,458 members

CSS Divide Page into Sections

Rate this:
4.56 (8 votes)
Please Sign up or sign in to vote.
4.56 (8 votes)
5 Nov 2014CPOL
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.

Two Sections. One Page

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
Image 2

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Víctor Sumozas
Software Developer (Senior)
Spain Spain
My name is Víctor Sumozas. I am an Industrial engineer and passionate exponent and enthusiast in software development and a keen interest in continuing evolution of .Net technologies. Certificated in Developing ASP.NET 4.5 MVC 4 Web Applications.
You can read the original post at Sumozas Null Pointer
Any comment will be highly appreciated. Thanks!

Comments and Discussions

 
QuestionFails for me Pin
Greg.Farquhar19-Nov-14 12:54
MemberGreg.Farquhar19-Nov-14 12:54 
AnswerRe: Fails for me Pin
Víctor Sumozas19-Nov-14 21:35
professionalVíctor Sumozas19-Nov-14 21:35 
Questiongood push Pin
snoopy0016-Nov-14 8:02
Membersnoopy0016-Nov-14 8:02 
AnswerRe: good push Pin
Víctor Sumozas6-Nov-14 9:24
professionalVíctor Sumozas6-Nov-14 9:24 
AnswerNot an article Pin
Akhil Mittal 5-Nov-14 22:10
mva Akhil Mittal 5-Nov-14 22:10 
GeneralRe: Not an article Pin
Víctor Sumozas5-Nov-14 22:18
professionalVíctor Sumozas5-Nov-14 22:18 
GeneralRe: Not an article Pin
Jochen Arndt5-Nov-14 22:21
mveJochen Arndt5-Nov-14 22:21 
GeneralRe: Not an article Pin
Víctor Sumozas5-Nov-14 22:27
professionalVíctor Sumozas5-Nov-14 22:27 
GeneralRe: Not an article Pin
Jochen Arndt5-Nov-14 22:30
mveJochen Arndt5-Nov-14 22:30 
AnswerRe: Not an article Pin
Akhil Mittal 5-Nov-14 22:29
mva Akhil Mittal 5-Nov-14 22:29 
GeneralMy vote of 3 Pin
pjaar895-Nov-14 21:52
Memberpjaar895-Nov-14 21:52 
GeneralRe: My vote of 3 Pin
Víctor Sumozas5-Nov-14 22:05
professionalVíctor Sumozas5-Nov-14 22:05 
GeneralRe: My vote of 3 Pin
Delian26-Nov-14 12:00
MemberDelian26-Nov-14 12:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 5 Nov 2014

Stats

17.4K views
15 bookmarked