Only display text description when hovering over checkbox link

Question

I'm trying to only show the "This is an item" text when hovering each checkbox link. For some reason, the "This is an item" text still seems to show when when checkbox link is not hovered over. Is there any way to only show text when the checkbox item is hovered over?

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

/* Filter Display */

.filter-box {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.filter-box button {
  background-color: rgb(49, 49, 49);
  color: white;
}


/* Section Buttons */

button.accordion {
  width: 30%;
  background-color: black;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s linear;
  color: white;
}

button.accordion:after {
  font-family: "fontawesome";
  font-size: 14px;
  float: right;
}

button.accordion.is-open:after {
  content: '\f056';
}

button.accordion:hover,
button.accordion.is-open {
  background-color: grey;
}

.accordion-content {
  width: 30%;
  background-color: rgb(255, 255, 255);
  border-left: 1px solid black;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.accordion-content li {
  list-style-type: none;
}

.accordion-content li:hover {
  font-weight: bold;
  color: red;
}

.item-description {
  display: none;
}

.accordion-content li:hover,
.item-description {
  display: contents;
}

<button class="accordion">Catagories</button>
<div class="accordion-content">
  <div class=list-item>
    <li>
      <label>
        <input type="checkbox" name="checkbox" />Item1
      </label>
    </li>
    <p class="item-description">This is an item</p>
  </div>

  <div class=list-item>
    <li>
      <label>
        <input type="checkbox" name="checkbox" />Item2
      </label>
    </li>
    <p class="item-description">This is an item</p>
  </div>

  <div class=list-item>
    <li>
      <label>
        <input type="checkbox" name="checkbox" />Item3
      </label>
    </li>
    <p class="item-description">This is an item</p>
  </div>
</div>

text in the bottom and only initiate text when hovering beside each checkbox.

I suggest you the solution on this page : https://stackoverflow.com/questions/58922567/problem-with-targetting-hover-dom-with-queryselectorall — MB_, Jun 05 '21 at 19:08
Will the
tag need to wrap around the entire
tags or just the
tags within each of the divs? — WeeklyButterfly34, Jun 05 '21 at 19:14

Tanner Dolby · Answer 1 · 2021-06-05T21:06:14.257

Your HTML contains invalid markup and you have conflicting styles for your list items hover state. First, lets address the HTML issues:

An <li> element may only be a child of <ul>, <ol>, or <menu> so using a <div> as the parent of list items in your current structure is invalid.
The permitted content for list elements is Flow Content so you have to make sure only elements of that group are children of <li> tags.

After reformatting your HTML so the markup was valid, (which you can always verify using W3C Validator) and fixing some of your list item hover state styling. The text "This is an item" displays inline with the checkboxes when hovered as expected.

This is why the text was visible before and after hover:

.item-description {
  display: none;
}

.accordion-content li:hover,
.item-description {
  display: contents;
}

Your making the .item-description text disappear with display: none then on the next line make it visible with display: contents. I assumed you meant to style the .item-description when list items were hovered so I changed this selector to be .accordion-content li:hover .item-description and that ensures text is only displayed when the list items are hovered.

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

/* Filter Display */

.filter-box {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.filter-box button {
    background-color: rgb(49, 49, 49);
    color: white;

}

/* Section Buttons */

button.accordion {
    width: 30%;
    background-color: black;
    border: none;
    outline: none;
    text-align: left;
    padding: 15px 20px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s linear;
    color: white;
}

button.accordion:after {
    font-family: "fontawesome";
    font-size: 14px;
    float: right;
}

button.accordion.is-open:after {
    content: '\f056';
}

button.accordion:hover,
button.accordion.is-open {
    background-color: grey;
}

.accordion-content {
    width: 30%;
    background-color: rgb(255, 255, 255);
    border-left: 1px solid black;
    border-right: 1px solid whitesmoke;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}

.accordion-content li {
    list-style-type: none;
}

.accordion-content li label {
  margin-right: .5rem;
}
.accordion-content li:hover {
    font-weight: bold;
    color: red;
}


.item-description {
    display: none;
}

.accordion-content li:hover .item-description {
    display: contents;

}

<button class="accordion">Categories</button>
    <ul class="accordion-content">
        <li class=list-item>
                <label>
                    <input type="checkbox" name="checkbox" />Item1
                </label>
                    <p class="item-description">This is an item</p>    
        </li>
            
         <li class=list-item>
                <label>
                    <input type="checkbox" name="checkbox" />Item2
                </label>
                    <p class="item-description">This is an item</p>    
          </li>
         
           <li class=list-item>
            <label>
                <input type="checkbox" name="checkbox" />Item3
            </label>
                    <p class="item-description">This is an item</p>    
         </li>
    </ul>

To an extent it does. The only thing is that when Item1 is selected the "This is an item" content joins together with the Item1 text content. Is there anyway to separate the checklist content from the hover text content? — WeeklyButterfly34, Jun 05 '21 at 19:28

Only display text description when hovering over checkbox link

1 Answers1