HTML & CSS accordion

Question

I'm looking for suggestions to improve my accordion code.

Someone could also use it as a starter for their code.

Here's the demo.

      var Calendar = function(o) {
        //Store div id
        this.divId = o.ParentID;
    
        // Days of week, starting on Sunday
        this.DaysOfWeek = o.DaysOfWeek;
    
        myLogger("this.DaysOfWeek == " + this.DaysOfWeek)
    
        // Months, stating on January
        this.Months = o.Months;
    
        myLogger("this.Months == " + this.Months)
    
        // Set the current month, year
        var d = new Date();
    
        myLogger("d == " + d)
    
        this.CurrentMonth = d.getMonth();
    
        myLogger("this.CurrentMonth == " + this.CurrentMonth);
    
        this.CurrentYear = d.getFullYear();
    
        myLogger("this.CurrentYear == "+ this.CurrentYear);
    
        var f=o.Format;
    
        myLogger("o == " + o);
    
        myLogger("f == " + f);
    
        //this.f = typeof(f) == 'string' ? f.charAt(0).toUpperCase() : 'M';
    
        if(typeof(f) == 'string') {
          this.f  = f.charAt(0).toUpperCase();
        } else {
          this.f = 'M';
        }
    
        console.log("this.f == ", this.f);
      };
    
      // Goes to next month
      Calendar.prototype.nextMonth = function() {
        console.log("Calendar.prototype.nextMonth = function() {");
    
        if ( this.CurrentMonth == 11 ) {
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          this.CurrentMonth = 0;
    
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          console.log("this.CurrentYear == "+ this.CurrentYear);
    
          this.CurrentYear = this.CurrentYear + 1;
    
          console.log("this.CurrentYear == "+ this.CurrentYear);
        } else {
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          this.CurrentMonth = this.CurrentMonth + 1;
    
          console.log("this.CurrentMonth + 1 == " + this.CurrentMonth);
        }
    
        this.showCurrent();
      };
    
      // Goes to previous month
      Calendar.prototype.previousMonth = function() {
        console.log("Calendar.prototype.previousMonth = function() {");
    
        if ( this.CurrentMonth == 0 ) {
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          this.CurrentMonth = 11;
    
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          console.log("this.CurrentYear == "+ this.CurrentYear);
    
          this.CurrentYear = this.CurrentYear - 1;
    
          console.log("this.CurrentYear == "+ this.CurrentYear);
        } else {
          console.log("this.CurrentMonth == " + this.CurrentMonth);
    
          this.CurrentMonth = this.CurrentMonth - 1;
    
          console.log("this.CurrentMonth - 1 == " + this.CurrentMonth);
        }
    
        this.showCurrent();
      };
    
      // 
      Calendar.prototype.previousYear = function() {
        console.log(" ");
    
        console.log("Calendar.prototype.previousYear = function() {");
    
        console.log("this.CurrentYear == " + this.CurrentYear);
    
        this.CurrentYear = this.CurrentYear - 1;
    
        console.log("this.CurrentYear - 1 i.e. this.CurrentYear == " + this.CurrentYear);
    
        this.showCurrent();
      }
    
      // 
      Calendar.prototype.nextYear = function() {
        console.log(" ");
    
        console.log("Calendar.prototype.nextYear = function() {");
    
        console.log("this.CurrentYear == " + this.CurrentYear);
    
        this.CurrentYear = this.CurrentYear + 1;
    
        console.log("this.CurrentYear - 1 i.e. this.CurrentYear == " + this.CurrentYear);
    
        this.showCurrent();
      }             
    
      // Show current month
      Calendar.prototype.showCurrent = function() {
        console.log(" ");
    
        console.log("Calendar.prototype.showCurrent = function() {");
    
        console.log("this.CurrentYear == "+ this.CurrentYear);
    
        console.log("this.CurrentMonth == " + this.CurrentMonth);
    
        this.Calendar(this.CurrentYear, this.CurrentMonth);
      };
    
      // Show month (year, month)
      Calendar.prototype.Calendar = function(y,m) {
        console.log(" ");
    
        console.log("Calendar.prototype.Calendar = function(y,m){");
    
        typeof(y) == 'number' ? this.CurrentYear = y : null;
    
        console.log("this.CurrentYear == "+ this.CurrentYear);
    
        typeof(y) == 'number' ? this.CurrentMonth = m : null;
    
        console.log("this.CurrentMonth == " + this.CurrentMonth);
    
        // 1st day of the selected month
        var firstDayOfCurrentMonth = new Date(y, m, 1).getDay();
    
        console.log("firstDayOfCurrentMonth == ", firstDayOfCurrentMonth);
    
        // Last date of the selected month
        var lastDateOfCurrentMonth = new Date(y, m+1, 0).getDate();
    
        console.log("lastDateOfCurrentMonth == ", lastDateOfCurrentMonth);
    
        // Last day of the previous month
        console.log("m == ", m);
    
        var lastDateOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();
    
        console.log("lastDateOfLastMonth == ", lastDateOfLastMonth);
    
        console.log("Print selected month and year.");
    
        // Write selected month and year. This HTML goes into <div id="year"></div>
        //var yearhtml = '<span class="yearspan">' + y + '</span>';
    
        // Write selected month and year. This HTML goes into <div id="month"></div>
        //var monthhtml = '<span class="monthspan">' + this.Months[m] + '</span>';
    
        // Write selected month and year. This HTML goes into <div id="month"></div>
        var monthandyearhtml = '<span id="monthandyearspan">' + this.Months[m] + ' - ' + y + '</span>';
    
        console.log("monthandyearhtml == " + monthandyearhtml);
    
        var html = '<table>';
    
        // Write the header of the days of the week
        html += '<tr>';
    
        console.log(" ");
    
        console.log("Write the header of the days of the week");
    
        for(var i=0; i < 7;i++) {
          console.log("i == ", i);
    
          console.log("this.DaysOfWeek[i] == ", this.DaysOfWeek[i]);
    
          html += '<th class="daysheader">' + this.DaysOfWeek[i] + '</th>';
        }
    
        html += '</tr>';
    
        console.log("Before conditional operator this.f == ", this.f);
    
        //this.f = 'X';
    
        var p = dm = this.f == 'M' ? 1 : firstDayOfCurrentMonth == 0 ? -5 : 2;
    
        /*var p, dm;
    
        if(this.f =='M') {
          dm = 1;
    
          p = dm;
        } else {
          if(firstDayOfCurrentMonth == 0) {
            firstDayOfCurrentMonth == -5;
          } else {
            firstDayOfCurrentMonth == 2;
          }
        }*/
    
        console.log("After conditional operator");
    
        console.log("this.f == ", this.f);
    
        console.log("p == ", p);
    
        console.log("dm == ", dm);
    
        console.log("firstDayOfCurrentMonth == ", firstDayOfCurrentMonth);
    
        var cellvalue;
    
        for (var d, i=0, z0=0; z0<6; z0++) {
          html += '<tr>';
    
          console.log("Inside 1st for loop - d == " + d + " | i == " + i + " | z0 == " + z0);
    
          for (var z0a = 0; z0a < 7; z0a++) {
            console.log("Inside 2nd for loop");
    
            console.log("z0a == " + z0a);
    
            d = i + dm - firstDayOfCurrentMonth;
    
            console.log("d outside if statm == " + d);
    
            // Dates from prev month
            if (d < 1){
              console.log("d < 1");
    
              console.log("p before p++ == " + p);
    
              cellvalue = lastDateOfLastMonth - firstDayOfCurrentMonth + p++;
    
              console.log("p after p++ == " + p);
    
              console.log("cellvalue == " + cellvalue);
    
              html += '<td id="prevmonthdates">' + 
                    		'<span id="cellvaluespan">' + (cellvalue) + '</span><br/>' +
    
            				'<ul id="cellvaluelist">' + 
                        	     '<li><span href="#" class="swim">SWIM - 1500m</span></li>' +
    
                        		 '<li><span href="#" class="chrono">CHRONO - 1500m</span></li>' +
    
                        	     '<li><span href="#" class="couponcode">MORE' +
    	                    	     	'<ul class="coupontooltipullist">' +
    
    	                    	     		'<li class="coupontooltip_li_list">' +
                        	     				'<img class="coupontooltipimg" src="images/tooltipswim.png">' + 
                        	     				'<span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>' +
    	                    	     		'</li></br>' +
    
    	                    	     		'<li class="coupontooltip_li_list">' +
                        	     				'<img class="coupontooltipimg" src="images/tooltipswim.png">' + 
                        	     				'<span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>' +
    	                    	     		'</li></br>' +				                    	     		
    
    	                    	     	'</ul>' +
    	                    	      '</span>' + 
    	                    	 '</li>' +
                        	'</ul>' +
                       '</td>';
    
            // Dates from next month
            } else if ( d > lastDateOfCurrentMonth){
              console.log("d > lastDateOfCurrentMonth");
    
              console.log("p before p++ == " + p);
    
              html += '<td id="nextmonthdates">' + (p++) + '</td>';
    
              console.log("p after p++ == " + p);
    
            // Current month dates
            } else {
              html += '<td id="currentmonthdates">' + (d) + '</td>';
              
              console.log("d inside else { == " + d);
    
              p = 1;
    
              console.log("p inside } else { == " + p);
            }
            
            if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {
              console.log("INSIDE if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {");
    
              console.log("i == " + i);
    
              console.log("d == " + d);
    
              console.log("z0 == " + z0);
    
              z0 = 10; // no more rows
            }
    
            console.log("i before i++ == " + i);
    
            i++;
    
            console.log("i after i++ == " + i);           
          }
    
          html += '</tr>';
        }
    
        // Closes table
        html += '</table>';
    
        // Write HTML to the div
        //document.getElementById("year").innerHTML = yearhtml;
    
        //document.getElementById("month").innerHTML = monthhtml;
    
        document.getElementById("monthandyear").innerHTML = monthandyearhtml;
    
        document.getElementById(this.divId).innerHTML = html;
      };
    
      // On Load of the window
      window.onload = function() {
        
        // Start calendar
        var c = new Calendar({
          ParentID:"divcalendartable",
    
          DaysOfWeek:[
          'MON',
          'TUE',
          'WED',
          'THU',
          'FRI',
          'SAT',
          'SUN'
          ],
    
          Months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
    
          Format:'dd/mm/yyyy'
        });
    
        c.showCurrent();
        
        // Bind next and previous button clicks
        getId('btnPrev').onclick = function(){
          c.previousMonth();
        };
    
        getId('btnPrevYr').onclick = function(){
          c.previousYear();
        };
    
        getId('btnNext').onclick = function(){
          c.nextMonth();
        };
    
        getId('btnNextYr').onclick = function(){
          c.nextYear();
        };                        
      }
    
      // Get element by id
      function getId(id) {
        return document.getElementById(id);
      }
    
      function myLogger(content) {
        if (window.console && window.console.log) {
            console.log(content);
        }
      }

/*--------------------------------- 
      Accordion styling - drilled down to specific element to prevent overriding of inner element styling
      ---------------------------------*/
    #accordion_main_div {
      padding: 15px;
      /*float:left;*/
      background-color: #D6D6D6;
      margin-left: 245px;
    }
    
    #accordion_main_div_ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    #accordion_main_div_li {
      list-style-type: none;
      border-bottom: 2px solid #000000;  
    }
    
    #accordion_main_div_ul_li_a {
      text-decoration: none;
      display: block;
      padding: 10px;
      background: #08445A;
      color: #FFFFFF;
    }
    
    .accordion_inner_div {
      display: none;
    }
    
    /*Display block enables the collapsing*/
    .accordion_inner_div:target{
      display: block;
    }
    
    .accordion_inner_div, .accordion_inner_div_one {
      padding: 4px;
    }
    
    /*Calendar table styling */
    table {
      border-collapse: collapse;
      font-family: Georgia, Times, serif;
    }
    
    /*Table header*/
    th {
      border: 1px solid #A8A8A8;
      vertical-align: top;
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 20px;
      font-weight: bold;  
    }
    
    /*Table cells*/
    td {
      height: 100px;
      width: 150px;
      vertical-align: top;
    }
    
    /*Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
    #calendaroverallcontrols {
      text-align: center;
      background-color: #D6D6D6;
    }
    
    #calendarmonthcontrols {
      /*background-color: #FF0000;*/
    }
    
    #calendarmonthcontrols > div, #calendarmonthcontrols > a {
        display: inline-block;
    }   
    
    #btnPrevYr {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 35px;
      font-weight: bold;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      /*background: #00FFCC;*/      
    }
    
    #btnPrev {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 35px;
      font-weight: bold;
      text-decoration: none;
      margin-left: 20px;
      vertical-align: middle;
      cursor: pointer;
      /*background: #00FFCC;*/
    }
    
    #monthandyearspan {
      width: 50px;
      font-size: 25px;
      font-weight: bold;
      margin-left: 20px;
      margin-right: 20px;
      vertical-align: middle;
      /*background: #00FFCC;*/
    }   
    
    #monthandyear {
      vertical-align: middle;
    }
    
    #btnNext {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 35px;
      font-weight: bold;  
      text-decoration: none;
      margin-right: 20px;
      vertical-align: middle;
      font-weight: bold;
      cursor: pointer;
      /*background: #00FFCC;*/
    }
    
    #btnNextYr {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 35px;
      font-weight: bold;  
      text-decoration: none;
      vertical-align: middle;
      font-weight: bold;
      cursor: pointer;
      /*background: #00FFCC;*/
    }       
    
    #divcalendartable {
      /*clear: both;*/
      background: #F5F5F5;
      display: inline-block;
    }
    
    .daysheader {
      background: #C0C0C0;
      height: auto;
      text-align: center;
    }
    
    #prevmonthdates {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 20px;
      font-weight: bold;
      background-color: #E0E0E0;
    }
    
    #nextmonthdates {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 20px;
      font-weight: bold;  
      background-color: #E0E0E0;
    }
    
    #currentmonthdates {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 20px;
      font-weight: bold;  
      background-color: #FFFFFF;
    }
    
    /*Apply styling UL cellvaluelist*/
    #cellvaluelist {
      font-family:'Trebuchet MS', Tahoma, Sans-serif;
      font-size: 20px;  
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    /*Apply styling on all LI items in the UL cellvaluelist*/
    #cellvaluelist > li {
      list-style-type: none;
      text-align: left;
      border-bottom: 2px solid #F5F5F5;
    }
    
    /*Eliminate border on last list item*/
    #cellvaluelist > li:last-child {
      border: none;
    }
    
    /*Styling for the span in the main list*/
    #cellvaluelist > li span {
      text-decoration: none;
      color: #000;
      display: block;
      width: 150px;
     
      -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
      -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
      -o-transition: font-size 0.3s ease, background-color 0.3s ease;
      -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
      transition: font-size 0.3s ease, background-color 0.3s ease;
    }
    
    /*Shared styling for swim and chrono*/
    .swim,.chrono {
        font-size: 15px;
        font-weight: normal; 
    }
    
    /*Styling for the list items in the table cells*/
    .swim {
      background: #626FD1;
    }
    
    /*Hover on the 1st LI item on the list in the table cell*/
    .swim:hover {
      background: #F5F5F5;
      cursor: pointer;
    }
    
    /*Styling for the list items in the table cells*/
    .chrono {
        background: #EDCF47;
    }
    
    /*Hover on the 2nd LI item on the list in the table cell*/
    .chrono:hover {
      background: #F5F5F5;
      cursor: pointer;
    }
    
    /*Styling for the list items in the table cells*/
    .couponcode {
        background: #47ED4D;
        font-size: 15px;
        font-weight: normal;
    }
    
    /*Hover on the last LI item on the list in the table cell*/
    .couponcode:hover {
      background: #F5F5F5;
      cursor: pointer;
    }
    
    /*Apply the hover on the UL coupontooltipullist*/
    .couponcode:hover .coupontooltipullist {
        display: block;
    }
    
    /*UL in the tooltip*/
    .coupontooltipullist {
        display: none;
        position: absolute;
        z-index: 1000;
        padding: 5px;
    }
    
    /*Shared UL and LI list properties in the tooltip*/
    .coupontooltipullist, .coupontooltip_li_list {
        list-style-type: none;
        float: left;
        margin: 0;
        padding: 0;
        cursor: pointer;    
    }
    
    /*LI in the tooltip*/
    .coupontooltip_li_list {
        background: #D6D6D6;
        border-bottom: 2px solid #F5F5F5;
        padding: 10px;
     }
    
    /*IMG in the LI in the tooltip*/
    .coupontooltipimg {
        width: 55px;
        height: 48px;
        float: left;
        padding-right: 5px;    
    }
    
    /*Span in the LI in the tooltip*/
    .coupontooltiplistspan {
      float: right;
    }

<div id="accordion_main_div">

	  <ul id="accordion_main_div_ul">

	    <li id="accordion_main_div_li">

	      <a id="accordion_main_div_ul_li_a" href="#one">Accordion option one</a>

		  <!-- By setting the id="one" it's been made the target element when accordion option with corresponding href property is clicked -->
	      <div id="one" class="accordion_inner_div">
	           <div id="calendaroverallcontrols">

	               <!-- <div id="year"></div> -->
		            <div id="calendarmonthcontrols">
		              <span id="btnPrevYr" title="Previous Year"><span><<</span></span>

		              <span id="btnPrev" title="Previous Month"><span><</span></span>

		              <!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->

		              <!-- <div id="month"></div>-->
	
			          <!-- JS targets this div -->
		              <div id="monthandyear"></div>

		              <!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>-->

		              <span id="btnNext" title="Next Month"><span>></span></span>
		            
		              <span id="btnNextYr" title="Next Year"><span>>></span></span>      
		            </div>
	           </div>

	            <!-- JS targets this div -->
                <div id="divcalendartable"></div>
	      </div>
	    </li>

	    <li id="accordion_main_div_li">
	      <a id="accordion_main_div_ul_li_a" href="#two">Accordion option two</a>

		  <!-- By setting the id="one" it's been made the target element when accordion option with corresponding href property is clicked -->
	      <div id="two" class="accordion_inner_div">
	        	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
	      </div>
	    </li>

	    <li id="accordion_main_div_li">
	      <a id="accordion_main_div_ul_li_a" href="#three">Accordion option three</a>
	      
		  <!-- By setting the id="one" it's been made the target element when accordion option with corresponding href property is clicked -->		      
	      <div id="three" class="accordion_inner_div">
	        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
	      </div>
	    </li>

	  </ul>
    </div>

Answer 1

The way I see it there are two accordion styles.

1. Expand and Contract (ec) the one Section where multiple Sections can be Expanded or Contracted.
2. Only one Section is Expanded at any given time. (ecp ec paired)

HTML

<button class="link" type="button" onclick ="ec('s1')">Button</button>
<div id="s1" class="hide">

</div>

<button class="link" type="button" onclick ="ec('s2')">Button</button>
<div id="s2" class="hide">

</div>
<div id="s999"></div>  

JS

I have two functions one for each the two EC methods.
function ec() is for EC method 1
functions ecp() is for EC method 2, pairs the current selected section with the previous.
Normally obe one of these functions is used on a web page.

The div id="s999" is for the initial value for prev so there is no null value to prev.

The reason I have var disp = div.style.display; is for when the same section is selected as previously. I do not care if prev is expanded or contracted just contracting it is much quicker than an else if to check its display state. But I need to remember what I am doing with the passed id.

If the same section is clicked and I toggle the display state, if it is being expanded the prev toggle would contract it again.

The line of code:

var y=div.offsetTop;window.scrollTo(0, y-64);

Takes the expanded section and puts it at the top of the Browser window. When all are contracted, it scrolls to the very top or the page.

The reason I use an array for the toggle is to eliminate the else if that would otherwise be required.

---

Working Snippet

  var toggle=[]
 toggle[''] = 'block';
    toggle['none'] = 'block';
    toggle['block'] = 'none';
    function ec(id){
      div = document.getElementById(id);
      div.style.display=toggle[div.style.display];
      var y=div.offsetTop;window.scrollTo(0, y-24);
    }



    var prev = document.getElementById('s999');
    function ecp(id){ 
      div = document.getElementById(id);
      var disp = div.style.display;
      prev.style.display='none';
      div.style.display=toggle[disp];
      prev=div;
      var y=div.offsetTop;window.scrollTo(0, y-24);
    }

body{background:#333;font-size:.8em;}
.btn1,.btn2{padding: .2em;margin:.2em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
.btn1{width:96%;}
.btn2{width:48%;}
h3{margin:0;}
p{margin:.1em .4em;}
.s1,.s2,.s3,.s4{display:none;padding:0;margin:0;}
.s1{color:#f0f;}
.s2{color:#0f0;}
.s3{color:#f00;}
.s4{color:#0ff;}
#s999{min-height:40em;}

<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
<button class="btn1" type="button" onclick ="ec('s1')">Section One </button><br/>
<div id="s1" class="s1">
<h3>This Section toggles when Section One button is clicked</h3>
<p>Section 1 content<br/>goes here.</p>
</div>
<button class="btn1" type="button" onclick ="ec('s2')">Section Two</button><br/>
<div id="s2" class="s2">
  <h3>This Section toggles when Section Two button is clicked</h3>
<p>Section 2 content<br/>goes here.</p>
</div>
<button class="btn2" type="button" onclick ="ecp('s3')">Section Three </button>
<button class="btn2" type="button" onclick ="ecp('s4')">Section Four</button>

<div id="s3" class="s3">
<h3>This Section toggles when Section Three button is clicked<br>And if Expanded will Contract when Button Four is clicked</h3>
<p>Section 3 content<br/>goes here.</p>
</div>
 <div id="s4" class="s4">
  <h3>This Section toggles when Section Four button is clicked<br>And if Expanded will Contract when Button Three is clicked</h3>
<p>Section 4 content<br/>goes here.</p>
</div>
<div id="s999"></div> 

<div style="height:40em"><p>&#x2002;</p></div>      
  </body></html>