Difference between revisions of "Team:Imperial College/Templates/NavBar"

Line 5: Line 5:
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"  
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"  
 
     integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
     integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
 
/********************************* expand panels ********************************/
 
                  var acc = document.getElementsByClassName("accordion");
 
            var i;
 
            console.log(acc)
 
            for (i = 0; i < acc.length ; i++) {
 
                acc[i].addEventListener("click", function() {
 
                    this.classList.toggle("active");
 
                    var panel = this.nextElementSibling;
 
                    if (panel.style.maxHeight) {
 
                        panel.style.maxHeight = null;
 
                    } else {
 
                        panel.style.maxHeight = (panel.scrollHeight + "px"); 
 
                    }
 
                });
 
            }
 
   
 
 
   
 
            function openAll(expt) {
 
                console.log("click active")
 
                var i, panelList;
 
                panelList = document.getElementsByClassName(expt);
 
                console.log(panelList)
 
               
 
               
 
                for (i = 2; i < panelList.length; i++) {
 
                    if (panelList[i].style.maxHeight == 0) {
 
                        console.log(panelList[i].style.maxHeight)
 
                        panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
 
                        console.log("open")
 
                        panelList[0].style.color = "#F76C6C";
 
                        panelList[1].style.color = "#F76C6C";
 
                        panelList[1].style.transform = "rotate(180deg)"
 
   
 
                    } else {
 
                        console.log(panelList[i].style.maxHeight)
 
                        panelList[i].style.maxHeight = null ;
 
                        console.log("close");
 
                        panelList[0].style.color = "#374785";
 
                        panelList[1].style.color = "#374785";
 
                        panelList[1].style.transform = "rotate(0deg)";
 
                    }
 
                }
 
               
 
            } 
 
 
/*********************************collapsible dropdowns********************************/
 
 
    var coll = document.getElementsByClassName("collapsible");
 
    var i;
 
   
 
    for (i = 0; i < coll.length; i++) {
 
        coll[i].addEventListener("click", function() {
 
            this.classList.toggle("active");
 
            var drop = this.nextElementSibling;
 
            if (drop.style.display === "block") {
 
                drop.style.display = "none";
 
            } else {
 
                drop.style.display = "block";
 
            }
 
        });
 
    }
 
=
 
 
 
</script>
 
  
  

Revision as of 20:45, 1 October 2018