HTML & CSS accordion

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 == " + th

The way I see it there are two accordion styles.

• Expand and Contract (ec) the one Section where multiple Sections can be

Expanded or Contracted.

• Only one Section is Expanded at any given time. (ecp ec paired)

HTML

Button

Button

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;}

Expand Contract
Section One

This Section toggles when Section One button is clicked

Section 1 content
goes here.

Section Two

This Section toggles when Section Two button is clicked

Section 2 content
goes here.

Section Three
Section Four

This Section toggles when Section Three button is clicked
And if Expanded will Contract when Button Four is clicked

Section 3 content
goes here.


This Section toggles when Section Four button is clicked
And if Expanded will Contract when Button Three is clicked

Section 4 content
goes here.



 


StackExchange Code Review Q#85676, answer score: 2