Changing the even/odd coloring of Treeview items depending on whether items are expanded or closed to keep continuity


In a treeview, I would like to achieve the following result:

Desired outcome – Example

Notice how the color changes depending on expanding and closing elements, so that every next visible li is colored even/odd continuously.

The HTML Treeview Structure:

<nav aria-label="Mythical University">
                              <ul class="treeview-navigation" role="tree" aria-label="Mythical University">

                                <li role="none" class="striped">
                                  <a role="treeitem" aria-expanded="false" aria-owns="id-about-subtree" href="#about">
                                    <span class="label">
                                      <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                         <polygon points="2 1, 12 1, 7 9"></polygon>
                                        </svg>
                                      </span>
                                      About
                                    </span>
                                  </a>
                                  <ul id="id-about-subtree" role="group" aria-label="About">
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#overview">
                                        <span class="label">Overview</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#adminstration">
                                        <span class="label">Administration</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" aria-expanded="false" aria-owns="id-facts-subtree" href="#facts">
                                        <span class="label">
                                          <span class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                             <polygon points="2 1, 12 1, 7 9"></polygon>
                                            </svg>
                                          </span>
                                          Facts
                                        </span>
                                      </a>
                                      <ul id="id-facts-subtree" role="group" aria-label="Facts">
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#history">
                                          <span class="label">History</span>
                                          </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#current-statistics">
                                            <span class="label">
                                              Current Statistics
                                            </span>
                                          </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#awards">
                                            <span class="label">Awards</span>
                                          </a>
                                        </li>
                                      </ul>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" aria-expanded="false" aria-owns="id-campus-tours-subtree" href="#campus-tours">
                                        <span class="label">
                                          <span class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                             <polygon points="2 1, 12 1, 7 9"></polygon>
                                            </svg>
                                          </span>
                                          Campus Tours
                                        </span>
                                      </a>
                                      <ul id="id-campus-tours-subtree" role="group" aria-label="Campus Tours">
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#for-prospective-students">
                                            <span class="label">
                                              For Prospective Students
                                            </span>
                                        </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#for-alumni">
                                            <span class="label">For Alumni</span>
                                          </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#for-visitors">
                                            <span class="label">For Visitors</span>
                                          </a>
                                        </li>
                                      </ul>
                                    </li>
                                  </ul>
                                </li>
                                <li role="none" class="striped">
                                  <a role="treeitem" aria-expanded="false" aria-owns="id-admissions-subtree" href="#admissions">
                                    <span class="label">
                                      <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                         <polygon points="2 1, 12 1, 7 9"></polygon>
                                        </svg>
                                      </span>
                                      Admissions
                                    </span>
                                  </a>
                                  <ul id="id-admissions-subtree" role="group" aria-label="Admissions">
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#apply">
                                        <span class="label">Apply</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" aria-expanded="false" aria-owns="id-tuition-subtree" href="#tuition">
                                        <span class="label">
                                          <span class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                             <polygon points="2 1, 12 1, 7 9"></polygon>
                                            </svg>
                                          </span>
                                          Tuition
                                        </span>
                                      </a>
                                      <ul id="id-tuition-subtree" role="group" aria-label="Tuition">
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#undergraduate">
                                            <span class="label">Undergraduate</span>
                                          </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#graduate">
                                            <span class="label">Graduate</span>
                                          </a>
                                        </li>
                                        <li role="none" class="striped">
                                          <a role="treeitem" href="#professional-schools">
                                            <span class="label">Professional Schools</span>
                                          </a>
                                        </li>
                                      </ul>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#signup">
                                        <span class="label">Sign Up</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#visit">
                                        <span class="label">Visit</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#photo-tour">
                                        <span class="label">Photo Tour</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#connect">
                                        <span class="label">Connect</span>
                                      </a>
                                    </li>
                                  </ul>
                                </li>
                                <li role="none" class="striped">
                                  <a role="treeitem" aria-expanded="false" aria-owns="id-academics-subtree" href="#academics">
                                    <span class="label">
                                      <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                                         <polygon points="2 1, 12 1, 7 9"></polygon>
                                        </svg>
                                      </span>
                                      Academics
                                    </span>
                                  </a>
                                  <ul id="id-academics-subtree" role="group" aria-label="Academics">
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#colleges-and-schools">
                                        <span class="label">Colleges &amp; Schools</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#programs-of-study">
                                        <span class="label">Programs of Study</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#honors-programs">
                                        <span class="label">Honors Programs</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#online-courses">
                                        <span class="label">Online Courses</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#course-explorer">
                                        <span class="label">Course Explorer</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#register-for-classes">
                                        <span class="label">Register for Classes</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#academic-calendar">
                                        <span class="label">Academic Calendar</span>
                                      </a>
                                    </li>
                                    <li role="none" class="striped">
                                      <a role="treeitem" href="#tanscripts">
                                        <span class="label">Transcripts</span>
                                      </a>
                                    </li>
                                  </ul>
                                </li>
                              </ul>
                            </nav>

CSS:

  /* Remove default bullets */
ul, #myUL {
      list-style-type: none;
    }
    
    /* Remove margins and padding from the parent ul */
    #myUL {
      margin: 0;
      padding: 0;
    }
    
    /* Style the caret/arrow */
    .caret {
      cursor: pointer;
      user-select: none; /* Prevent text selection */
    }
    
    /* Create the caret/arrow with a unicode, and style it */
    .caret::before {
      content: "B6";
      color: black;
      display: inline-block;
      margin-right: 6px;
    }
    
    /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
    .caret-down::before {
      transform: rotate(90deg);
    }
    
    /* Hide the nested list */
    .nested {
      display: none;
    }
    
    /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
    .active {
      display: block;
    } 

   
    .treeview-navigation ul,
    .treeview-navigation li {
      margin: 0;
      padding: 0;
    }
    
    .treeview-navigation li li span.label {
      padding-left: 1em;
    }
    
    .treeview-navigation li li li span.label {
      padding-left: 2em;
    }
    
    .treeview-navigation[role="tree"] {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .treeview-navigation[role="tree"] li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .treeview-navigation a[role="treeitem"] ul {
      margin: 0;
      padding: 0;
    }
    
    .treeview-navigation
      a[role="treeitem"][aria-expanded="false"]
      + [role="group"] {
      display: none;
    }
    
    .treeview-navigation a[role="treeitem"][aria-expanded="true"] + [role="group"] {
      display: block;
    }
    
    .treeview-navigation a[role="treeitem"] > span svg {
      transform: translate(0, 0);
    }
    
    .treeview-navigation a[role="treeitem"][aria-expanded="false"] > span svg {
      transform: rotate(270deg) translate(2px, 2px);
    }
    
    .treeview-navigation a[role="treeitem"] {
      margin: 0;
      padding: 4px;
      padding-left: 4px;
      text-decoration: none;
      border: none;
      display: block;
    }
    
    .treeview-navigation a[role="treeitem"][aria-current] {
      background-color: #333333;
      border:0;
    }
    
    .treeview-navigation a[role="treeitem"] span.icon svg polygon {
      fill: currentColor;
      stroke: transparent;
    }
    
    /* disable default keyboard focus styling for treeitems
       Keyboard focus is styled with the following CSS */
    
    .treeview-navigation a[role="treeitem"]:focus {
      background-color: #6A6A6A;
      border:0;
      outline: none;
    }
    
    .treeview-navigation a[role="treeitem"][aria-current]:focus {
      border:none;
      outline: none;
    }
    
    .treeview-navigation a[role="treeitem"]:hover {
      text-decoration: none;
      border: none;
      outline: none;
    }
    
    .treeview-navigation a[role="treeitem"] span.icon:hover {
      color: #333;
    }
    
    .treeview-navigation a[role="treeitem"] span.icon svg polygon:hover {
      stroke: currentColor;
    }

    .label {
      color: #d4d4d4;
      font-weight: normal;
      font-size: 14px;
      text-align: center;
      line-height: 1;
      width: 100% !important;
      height: auto;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .striped {
         background-color: #fff;
    }

    .striped2 {
          background-color: #000;
    }

Javascript for the even/odd coloring:

'use strict';

let i = 0;
    $(".striped").each(function(i){
        if(i%2==0){
            $(this).addClass("striped2");
        }
        i++;
    });

In my code above, every even li element is colored differently, which means that even/odd styling is also applied to closed li elements, leading to unwanted results:

Example1:
https://22-55.com/example1.png

Example2:
https://22-55.com/example2.png

What would be the best approach to get this problem solved?

Source: CSS – Stack Overflow

September 13, 2021
Category : News
Tags: css | javascript | treeview | treeviewitem

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.