Expandable Regions using HTML

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

1. <style type="text/css">
2.     a.headingStyle
3.     {
4.         text-decoration: none;
5.         margin-left: 0.5em;            
6.     }
7.     a.headingStyle:hover
8.     {
9.         text-decoration: underline;
10.     }
11.     a.headingStyle span.charStyle
12.     {
13.         font-family: monospace;
14.         font-weight: normal;
15.     }
16.     .contentStyle
17.     {
18.         display: none;
19.         margin-left: 1.5em;
20.         margin-right: 0.5em;
21.         margin-bottom: 0.5em;
22.         border-width: thin;
23.         border-style: outset;
24.         background-color:#D2E3FF;
25.     }
26.     .upArrowStyle
27.     {
28.         height:32px;
29.         background-image: url('Up_Arrow_32x32.png');
30.         background-repeat:no-repeat;
31.     }
32.     .downArrowStyle
33.     {
34.         height:32px;
35.         background-image: url('Down_Arrow_32x32.png');
36.         background-repeat:no-repeat;
37.     }
38. </style>
39.  
40. <script type="text/javascript">
41.     function display(item) {
42.         if (document.getElementById) {
43.             // Retrieving the first child item.
44.             var firstChildItem = item.firstChild;
45.             // Getting the correct child item with inner HTML text.
46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
47.             // Toggling the + or - according to the state after click.
48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
49.             // Toggling the display image after click.
50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
51.             // Get the sub item to toggle visibility.
52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
53.             // Toggle visibility of the sub item.
54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
55.         }
56.     }
57.  
58.     // Displaying everything if item could not be found.
59.     if (!document.getElementById)
60.         document.write('<style type="text/css"><!--\n .dspcont{display:block;}\n //--></style>');
61. </script>
62.  
63. <!-- If Java scripts are blocked, display everything expanded. -->
64. <noscript>
65.     <style type="text/css">
66.         .dspcont
67.         {
68.             display: block;
69.         }
70.     </style>
71. </noscript>
72. <div>
73.     <!-- If + or - is required to be displayed besides the image simply change display:none; to display:block; in following sections. -->
74.     <h1>
75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
77.         </a>
78.     </h1>
79.     <div class="contentStyle">Title 1 content goes here.</div>
80.     <h1>
81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
83.         </a>
84.     </h1>
85.     <div class="contentStyle">
86.         <h2>
87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
89.         <div class="contentStyle">
90.             Sub title 1 content goes here.</div>
91.         <h2>
92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
94.         <div class="contentStyle">
95.             Sub title 2 content goes here.</div>
96.     </div>
97.     <h1>
98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
100.     <div class="contentStyle">Title 3 content goes here.</div>
101. </div>

 

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.

HTML Menu

Today I thought to share with you, how to create menus using HTML only. These menus will be very useful if you need to create web sites using only HTML.

Above menu is created using basic unordered list (UL), list items (LI), links and some CSS.

Below is the HTML code for the menu. In the code I have created the full menu using HTML lists and used CSS to format the list to work as a menu.

1. <ul class="mainMenu">
2.     <li class="mainMenuItem"><a href="Home.html" class="mainMenuLink">Home</a>
3.         <ul class="subMenu">
4.             <li class="subMenuItem"><a href="Page1.html" class="subMenuItemLink">e</a></li>
5.             <li class="subMenuItem"><a href="Page2.html" class="subMenuItemLink">ee</a></li>
6.         </ul>
7.     </li>
8.     <li class="mainMenuItem"><a href="Module1.html" class="mainMenuLink">Module 1</a>
9.         <ul class="subMenu">
10.             <li class="subMenuItem"><a href="Module1_Page1.html" class="subMenuItemLink">dd</a></li>
11.             <li class="subMenuItem"><a href="Module1_Page2.html" class="subMenuItemLink">ddd</a></li>
12.             <li class="subMenuItem"><a href="Module1_Page3.html" class="subMenuItemLink">dddd</a></li>
13.         </ul>
14.     </li>
15.     <li class="mainMenuItem"><a href="Module2.html" class="mainMenuLink">Module 2</a>
16.         <ul class="subMenu">
17.             <li class="subMenuItem"><a href="Module2_Page1.html" class="subMenuItemLink">c</a></li>
18.             <li class="subMenuItem"><a href="Module2_Page2.html" class="subMenuItemLink">cc</a></li>
19.             <li class="subMenuItem"><a href="Module2_Page3.html" class="subMenuItemLink">ccc</a></li>
20.         </ul>
21.     </li>
22.     <li class="mainMenuItem"><a href="Module3.html" class="mainMenuLink">Module 3</a>
23.         <ul class="subMenu">
24.             <li class="subMenuItem"><a href="Module3_Page1.html" class="subMenuItemLink">bb</a></li>
25.             <li class="subMenuItem"><a href="Module3_Page2.html" class="subMenuItemLink">bbb</a></li>
26.             <li class="subMenuItem"><a href="Module3_Page3.html" class="subMenuItemLink">bbbb</a></li>
27.         </ul>
28.     </li>
29.     <li class="mainMenuItem"><a href="Module4.html" class="mainMenuLink">Module 4</a>
30.         <ul class="subMenu">
31.             <li class="subMenuItem"><a href="Module4_Page1.html" class="subMenuItemLink">aa</a></li>
32.             <li class="subMenuItem"><a href="Module4_Page2.html" class="subMenuItemLink">aaa</a></li>
33.             <li class="subMenuItem"><a href="Module4_Page3.html" class="subMenuItemLink">aaaa</a></li>
34.         </ul>
35.     </li>
36. </ul>

 

Below is the CSS that you need to make the above HTML work as a menu.

1. .subMenu
2. {
3.     padding: 1px;
4.     position: absolute;
5.     visibility: hidden;
6. }
7. .subMenuItem
8. {
9.     list-style: none;
10.     float: left;
11.     position: relative;
12.     margin: 0px;
13.     display: block;
14.     width: 92px;
15. }
16. .subMenuItemLink
17. {
18.     color: White;
19.     text-align: left;
20.     text-decoration: none;
21.     padding-left: 5px;
22.     display: block;
23.     height: 32px;
24.     width: 92px;
25.     background-image: url('./Images/menuButtonSelected.jpg');
26. }
27. <!-- Changing the menu when mouse is over the menu. -->
28. .mainMenuItem:hover .mainMenuLink
29. {
30.     color: White;
31.     background-color: Blue;
32.     background-image: url('./Images/menuButtonSelected.jpg');
33. }
34. <!-- Changing the menu when it is selected. -->
35. .mainMenuItem:active .mainMenuLink
36. {
37.     background-image: url('./Images/menuButtonSelected.jpg');
38. }
39. <!-- Showing the sub menu items when mouse is over the main menu. -->
40. .mainMenuItem:hover .subMenu
41. {
42.     visibility: visible;
43.     z-index: 100;
44. }

 

Do not forget to import the CSS into the HTML page by using a link as shown below.

1. <link rel="stylesheet" type="text/css" href="DefaultStyles.css" />

 

I used the following images as the background images of the links.

 

I think the code is not that complex, so hope this helps, let me know if you need any help on this, I will try to help you out.