Skip to main content
Code Review

Return to Answer

added 26 characters in body
Source Link
Misunderstood
Misunderstood
  • 535
  • 2
  • 7
  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-6424);
    }



    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-6424);
    }
body{background:#333;font-size:.8em;}
.btnbtn1,.btn2{width:48%;paddingpadding: .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="btn"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="btn"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="btn"class="btn2" type="button" onclick ="ecp('s3')">Section Three </button>
<button class="btn"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>
  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-64);
    }



    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-64);
    }
body{background:#333;font-size:.8em;}
.btn{width:48%;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%);}
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;}
<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
<button class="btn" 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="btn" 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="btn" type="button" onclick ="ecp('s3')">Section Three </button>
<button class="btn" 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> 

  
  </body></html>
  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>
added 26 characters in body
Source Link
Misunderstood
Misunderstood
  • 535
  • 2
  • 7
  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-64);
    }



    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-64);
    }
.hidebody{displaybackground:none;#333;font-size:.8em;}
.btn{width:100%;padding48%;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%);}
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;}
<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
    <button class="btn" type="button" onclick ="ec('s1')">Section One </button><br/>
     
<div id="s1" class="hide">class="s1">
    <h3>This Section toggletoggles when Section One button is clicked</h3>
    <p>Section 1<br/>content<br/>goes<br1 content<br/>here>goes here.</p>
    </div>
    
    <button class="btn" type="button" onclick ="ec('s2')">Section Two</button>button><br/>
    <div id="s2" class="hide">class="s2">
      <h3>This Section toggletoggles when Section Two button is clicked</h3>
    <p>Section 2<br/>content<br/>goes<br2 content<br/>here>goes here.</p>
    </div>
    <button class="btn" type="button" onclick ="ecp('s3')">Section Three </button><br/>button>
<button class="btn" type="button" onclick ="ecp('s4')">Section Four</button>

<div id="s3" class="hide">class="s3">
    <h3>This Section toggletoggles when Section Three button is clicked<br>And if Expanded will Contract when Button Four is clicked</h3>
    <p>Section 3<br/>content<br/>goes<br3 content<br/>here>goes here.</p>
    </div>
    <button class="btn" type="button" onclick ="ecp('s4')">Section Four</button>
    <div id="s4" class="hide">class="s4">
      <h3>This Section toggletoggles when Section Four button is clicked<br>And if Expanded will Contract when Button Three is clicked</h3>
    <p>Section 4<br/>content<br/>goes<br4 content<br/>here>goes here.</p>
    </div>
    <div id="s999"></div>  

  
  </body></html>
  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-64);
    }



    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-64);
    }
.hide{display:none;}
.btn{width:100%;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%);}
<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
    <button class="btn" type="button" onclick ="ec('s1')">Section One </button><br/>
    <div id="s1" class="hide">
    <h3>This Section toggle when Section One button is clicked</h3>
    <p>Section 1<br/>content<br/>goes<br/>here.</p>
    </div>
    
    <button class="btn" type="button" onclick ="ec('s2')">Section Two</button>
    <div id="s2" class="hide">
      <h3>This Section toggle when Section Two button is clicked</h3>
    <p>Section 2<br/>content<br/>goes<br/>here.</p>
    </div>
    <button class="btn" type="button" onclick ="ecp('s3')">Section Three </button><br/>
    <div id="s3" class="hide">
    <h3>This Section toggle when Section Three button is clicked<br>And if Expanded will Contract when Button Four is clicked</h3>
    <p>Section 3<br/>content<br/>goes<br/>here.</p>
    </div>
    <button class="btn" type="button" onclick ="ecp('s4')">Section Four</button>
    <div id="s4" class="hide">
      <h3>This Section toggle when Section Four button is clicked<br>And if Expanded will Contract when Button Three is clicked</h3>
    <p>Section 4<br/>content<br/>goes<br/>here.</p>
    </div>
    <div id="s999"></div> 
  
  </body></html>
  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-64);
    }



    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-64);
    }
body{background:#333;font-size:.8em;}
.btn{width:48%;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%);}
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;}
<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
<button class="btn" 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="btn" 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="btn" type="button" onclick ="ecp('s3')">Section Three </button>
<button class="btn" 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>  

  
  </body></html>
added 775 characters in body
Source Link
Misunderstood
Misunderstood
  • 535
  • 2
  • 7

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.

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.

Source Link
Misunderstood
Misunderstood
  • 535
  • 2
  • 7