0

The goal is to use an unordered list where each dropdown in relative position contains a paragraph. I have the pseudocode :active working properly but am wondering if it's possible to toggle this drop down. Would a jQuery solution be best for this problem? Should I be using a button instead?

I am expecting each block a dropdown on click in relative position. This option would be toggleable.

.btn {
  display: inline-flex;
  padding: 0;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-size: 16px;
  cursor: pointer;
  background-color: #697180;
  font-family: 'Quicksand', sans-serif;
  margin-top: 10px;
  transition: all 1s;
}

.btn:hover {
  color: #e9eff8;
}

.coach_name,
.coach_school {
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.coach_school {
  background: rgba(0, 0, 0, 0.08);
}

.coaches_bar ul {
  list-style: none;
  display: block;
  padding: 10px;
}

.coaches_bar ul li {
  margin-top: 10px;
}

.coaches_info {
  display: none;
}

.coaches_bar ul li:active .coaches_info {
  display: block;
  position: relative;
  color: var(--color-white);
  margin-top: 10px;
}

.coaches_info ul {
  display: block;
}
<div class="coaches_bar">
  <ul>
    <li>
      <a class="btn">
        <span class="coach_name">Cody Ferriero</span>
        <span class="coach_school">Northeastern '14 Governors Academy '04</span
            >
          </a>
          <div class="coaches_info">
            <ul>
                <li><p>Cody is a NEFPHL and Top Gun alumni. Cody played prep school hockey at Governor’s Academy. He went on to be a Division 1 scholarship hockey player at Northeastern University where he was given the Most Exciting Player Award in (2012-13). He was drafted 127th in the 2010 NHL Entry Draft by the San Jose Sharks. He played 2 years in the ECHL with the Rapid City Rush and the Utah Grizzlies. Cody is a CFSC (Certified Functional Strength Coach).</p></li>
            </ul>
        </li>
        <li>
            <a class="btn">
              <span class="coach_name">Cody Ferriero</span>
        <span class="coach_school">Northeastern '14 Governors Academy '04</span
              >
            </a>
            <div class="coaches_info">
              <ul>
                  <li><p>Cody is a NEFPHL and Top Gun alumni. Cody played prep school hockey at Governor’s Academy. He went on to be a Division 1 scholarship hockey player at Northeastern University where he was given the Most Exciting Player Award in (2012-13). He was drafted 127th in the 2010 NHL Entry Draft by the San Jose Sharks. He played 2 years in the ECHL with the Rapid City Rush and the Utah Grizzlies. Cody is a CFSC (Certified Functional Strength Coach).</p></li>
              </ul>
          </li>
        
      </ul>
    </div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Ben Mirageas
  • 11
  • 2
  • Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – chiliNUT Apr 19 '23 at 17:43
  • @chiliNUT This question is about state properties like `:active`, not pseudo-elements. – Barmar Apr 19 '23 at 18:22
  • Are you asking how to change the `:active` state of the element from JS? – Barmar Apr 19 '23 at 18:22
  • I think so, if there is another way to achieve the same outcome. Which is a vertical list of buttons which each have a drop down on click. On re-click this menu should be re-hidden. Currently I have to hold the mouse button to see the drop down. – Ben Mirageas Apr 19 '23 at 18:48
  • Title changed -- – Ben Mirageas Apr 19 '23 at 18:50
  • You shouldn't be using anchors for actions. If you don't have a URL as the `href` value on your anchors there's a good chance they should be buttons. – isherwood Apr 19 '23 at 19:08

0 Answers0