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

Line 7: Line 7:
 
<script>
 
<script>
  
−
               
+
                  var acc = document.getElementsByClassName("accordion");
−
                        var acc = document.getElementsByClassName("accordion");
+
            var i;
−
                        var i;
+
            console.log(acc)
−
                        console.log(acc)
+
            for (i = 0; i < acc.length ; i++) {
−
                        for (i = 0; i < acc.length ; i++) {
+
                acc[i].addEventListener("click", function() {
−
                            acc[i].addEventListener("click", function() {
+
                    this.classList.toggle("active");
−
                                this.classList.toggle("active");
+
                    var panel = this.nextElementSibling;
−
                                var panel = this.nextElementSibling;
+
                    if (panel.style.maxHeight) {
−
                                if (panel.style.maxHeight) {
+
                        panel.style.maxHeight = null;
−
                                    panel.style.maxHeight = null;
+
                    } else {
−
                                } else {
+
                        panel.style.maxHeight = (panel.scrollHeight + "px");   
−
                                    panel.style.maxHeight = (panel.scrollHeight + "px");   
+
                    }
−
                                }
+
                });
−
                            });
+
            }
−
                        }
+
   
−
               
+
  
 +
   
 +
            function openAll(expt) {
 +
                console.log("click active")
 +
                var i, panelList;
 +
                panelList = document.getElementsByClassName(expt);
 +
                console.log(panelList)
 +
               
 
                  
 
                  
−
                        function openAll(expt) {
+
                for (i = 2; i < panelList.length; i++) {
−
                            console.log("click active")
+
                    if (panelList[i].style.maxHeight == 0) {
−
                            var i, panelList;
+
                        console.log(panelList[i].style.maxHeight)
−
                            panelList = document.getElementsByClassName(expt);
+
                        panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
−
                            console.log(panelList)
+
                        console.log("open")
−
                           
+
                        panelList[0].style.color = "#F76C6C";
−
                           
+
                        panelList[1].style.color = "#F76C6C";
−
                            for (i = 2; i < panelList.length; i++) {
+
                        panelList[1].style.transform = "rotate(180deg)"
−
                                if (panelList[i].style.maxHeight == 0) {
+
   
−
                                    console.log(panelList[i].style.maxHeight)
+
                    } else {
−
                                    panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
+
                        console.log(panelList[i].style.maxHeight)
−
                                    console.log("open")
+
                        panelList[i].style.maxHeight = null ;
−
                                    panelList[0].style.color = "#F76C6C";
+
                        console.log("close");
−
                                    panelList[1].style.color = "#F76C6C";
+
                        panelList[0].style.color = "#374785";
−
                                    panelList[1].style.transform = "rotate(180deg)"
+
                        panelList[1].style.color = "#374785";
 +
                        panelList[1].style.transform = "rotate(0deg)";
 +
                    }
 +
                }
 
                  
 
                  
−
                                } 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)";
+
−
                                }
+
−
                            }
+
−
                           
+
−
                        }   
+
 
    
 
    
 
</script>
 
</script>

Revision as of 20:18, 1 October 2018