Using Javascript to change chevron class in removing and adding a css class with Javascript

The script below takes in a string value as a parameter and then splits that string using the delimiter '|' . The first one in the array must be the id of the html element clicked as it is set to the activeID. The function then defines the classes that are going to be added or removed. In order to change the classes from the last item clicked, a hidden element is used along with a getter and setter functions. Once we get the lastClicked item, we set the current item as it is now the last item clicked. (See the set/getLastChevClicked functions that get or set the hidden html field to see how to get a field with as it is differnet in .NET because hidden inputs are not recognized in .NET by the IIS) The hidden field here is an field ( you can use an <input> field or get the innerHTML of a span or div just the same) The hidden field is:
<asp:HiddenField ID="lastChevIdClicked" runat="server" Value="NULL" /> and it is located in the body of the html document somewhere. 
The script is easy enough to interpret and can be added to the bottom of your html page after the ending </body> tag:
        function switchChevronAround(chevs) {
            var chevrons = chevs.split("|");
            var downBefore = "glyphicon glyphicon-chevron-down:before";
            var upBefore = "glyphicon glyphicon-chevron-up:before";
            var down = "glyphicon glyphicon-chevron-down";
            var up = "glyphicon glyphicon-chevron-up";
            //first get the active class list to know what it was
            var activeID = chevrons[0];
            //set the id clicked
            var lastClicked = getLastChevClicked();
            var activeElem = document.getElementById(activeID);
            var activeClasses = activeElem.classList
            var lastElem = document.getElementById(lastClicked);
            if (activeElem == lastElem) {               
                    if (activeElem.classList == up) {
                        activeElem.className = down
                    } else {
                        activeElem.className = up
            } else {
                    if (lastElem == "NULL") {
                        activeElem.className = up;
                    } else if (activeElem.classList == up) {
                        activeElem.className = down
                    } else {
                        activeElem.className = up
                    lastElem.className = down;
        function setLastChevClicked(idElem) {
            document.getElementById('<%= lastChevIdClicked.ClientID%>').value = idElem;          
        function getLastChevClicked() {
            return document.getElementById('<%= lastChevIdClicked.ClientID%>').value;           
Once you understand the script, you can have a whole list of elements like in an accordion menu and send the id's of all the elements you want to change as paremeters in the changeChevronAround() function. Since this function was written to change chevrons up and down in an accordion menu, the ideas of the menu items to change are sent and there are for of them in the list so the html elements look like the highlighted code below: (this is an hyperlink, an <a href...></a> would replace the Hyperlink tag in standard html) The icon element is the html that we are removing and adding classes to in order to change the chevron but we are sending the id of the icon on the span element that surrounds the icon to cover the whole clickable link.
<asp:HyperLink ID="linkAvailSizes" NavigateUrl="#" runat="server" Visible="false"><span onclick="switchChevronAround('availSizesAccBtn|relProductAccBtn|availColorsAccBtn|prodDetailsAccBtn')"><i id="availSizesAccBtn" class="glyphicon glyphicon-chevron-down" style="float:right;color:white;"></i>&nbsp;&nbsp;&nbsp;Available Sizes</span></asp:HyperLink>
Tags: chevron, clientID, Javascript
Last update:
2014-10-20 14:45
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.