Difference between revisions of "Template:WashU StLouis"

m (menu item highlight)
(Added CSS and Javascript for collapsable protocol divs)
Line 321: Line 321:
 
color:#72c9b6;
 
color:#72c9b6;
 
}
 
}
 +
 +
/********************************* EXPERIMENTS:PROTOCOL ********************************/
 +
 +
        button.protocol-accordion {
 +
            background-color: #eee;
 +
            color: #444;
 +
            cursor: pointer;
 +
            padding: 18px;
 +
            width: 100%;
 +
            border: none;
 +
            text-align: left;
 +
            outline: none;
 +
            font-size: 15px;
 +
            transition: 0.4s;
 +
        }
 +
       
 +
        button.protocol-accordion.active,
 +
        button.protocol-accordion:hover {
 +
            background-color: #ddd;
 +
        }
 +
       
 +
        button.protocol-accordion:after {
 +
            content: '\02795';
 +
            font-size: 13px;
 +
            color: #777;
 +
            float: right;
 +
            margin-left: 5px;
 +
        }
 +
       
 +
        button.protocol-accordion.active:after {
 +
            content: "\2796";
 +
        }
 +
       
 +
        div.protocol-panel {
 +
            padding: 0 18px;
 +
            background-color: white;
 +
            max-height: 0;
 +
            overflow: hidden;
 +
            transition: 0.6s ease-in-out;
 +
            opacity: 0;
 +
        }
 +
       
 +
        div.protocol-panel.show {
 +
            opacity: 1;
 +
            max-height: 500px;
 +
        }
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
Line 452: Line 498:
  
  
 +
<script>
 +
 +
// Function for collapsable protocols
 +
 +
var acc = document.getElementsByClassName("protocol-accordion");
 +
var i;
 +
var j;
 +
for (i = 0; i < acc.length; i++) {
 +
 +
    acc[i].onclick = function(){
 +
        this.classList.toggle("active");
 +
this.nextElementSibling.classList.toggle("show");
 +
        for (j = 0; j < acc.length; j++) {
 +
        if ( this!=acc[j] ) {
 +
 +
            acc[j].classList.remove("active");
 +
            acc[j].nextElementSibling.classList.remove("show");       
 +
        }
  
 +
        }
 +
  }
 +
}
 +
</script>
  
  

Revision as of 16:00, 15 June 2016

MENU ▤