Kevin Powell - Community•4w ago

visibility does not work

Hi guys, I have a simple list, when I click on an item of the list I want to display the icon of that item and hide other icons. I toggle the value of visibility from hidden to visible but the icon does not display as I expected. It works when I use display instead of visibility. Can anyone help me explain why?

10 Replies

emptyOP•4w ago

You can take a look here : https://jsbin.com/zubitijase/1/edit?html,css,js,output

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

emptyOP•4w ago

li {
  display: flex;
  align-items:center;
  svg{
   visibility: hidden;
  }
}

li.active{
  font-weight: bold
}

li.active svg{
 visibility: visible

}

<ul>
  <li class="active">
    <span>A-Z</span>
    <svg .../>
  </li>
  <li>
    <span>Z-A</span>
    <svg .../>
  </li>
</ul>

const listItems = document.querySelectorAll('ul li');

listItems.forEach(item => {
  item.addEventListener('click', () => {
    listItems.forEach(li => li.classList.remove('active'));
     item.classList.add('active');
  });
});

li {
  display: flex;
  align-items:center;
  svg{
   visibility: hidden;
  }
}

li.active{
  font-weight: bold
}

li.active svg{
 visibility: visible

}

<ul>
  <li class="active">
    <span>A-Z</span>
    <svg .../>
  </li>
  <li>
    <span>Z-A</span>
    <svg .../>
  </li>
</ul>

const listItems = document.querySelectorAll('ul li');

listItems.forEach(item => {
  item.addEventListener('click', () => {
    listItems.forEach(li => li.classList.remove('active'));
     item.classList.add('active');
  });
});

Chris Bolson•4w ago

I haven't yet been able to work out the actual cause but, if you change the id of the "defs" so that they are distinct, it does work as expected.

MarkBoots•4w ago

aside from your specific question, you could also just use radio buttons for this

emptyOP•4w ago

Sorry, I dont get it. Wdym "change the id of the 'defs' " Can you give me an example?

Chris Bolson•4w ago

Sorry, I said, "defs". The ID is set on the clipPath.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="">
          <g clip-path="url(#clip0_1599_15824)">
            <path d="M8 13.3077L9.68 15.4677C9.73669 15.5413 9.80933 15.6012 9.89246 15.6428C9.97559 15.6843 10.0671 15.7066 10.16 15.7077C10.2514 15.7088 10.342 15.6894 10.425 15.6511C10.508 15.6128 10.5815 15.5564 10.64 15.4861L16 9" stroke="#272727"  />
        </g>
         <defs>
           <clipPath id="clip0_1599_15824">
             <rect width="24" height="24" fill="blue" />
           </clipPath>
          </defs>
      </svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="">
          <g clip-path="url(#clip0_1599_15824)">
            <path d="M8 13.3077L9.68 15.4677C9.73669 15.5413 9.80933 15.6012 9.89246 15.6428C9.97559 15.6843 10.0671 15.7066 10.16 15.7077C10.2514 15.7088 10.342 15.6894 10.425 15.6511C10.508 15.6128 10.5815 15.5564 10.64 15.4861L16 9" stroke="#272727"  />
        </g>
         <defs>
           <clipPath id="clip0_1599_15824">
             <rect width="24" height="24" fill="blue" />
           </clipPath>
          </defs>
      </svg>

Both of your elements use the same id on the clipPath "#clip0_1599_15824". I don't know why this should cause the issue but it is. This is probably a could example of why you should never repeat ids in HTML. Changing this id (and the url that references it) to something unique will resolve the issue. To be honest the SVGs here are overly complicated for what you want to achieve (a checkmark). Something like this (adapted from Tabler Icons) achieves the same result without the need for ids, clip-paths or defintions:

<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12l5 5l10 -10" />
  </svg>

<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12l5 5l10 -10" />
  </svg>

If you are required to use the specific SVG that you have in the code, then you could look at SVG templates but that is another matter.

ἔρως•4w ago

ids cant be repeated that breaks svgs

MarkBoots•4w ago

here an example of the 'radio-button' route (with Chris' svg) https://codepen.io/MarkBoots/pen/mybbwKB (updated with use symbol)

Mark Boots

CodePen

Untitled

...

ἔρως•4w ago

which is why people should use <symbols> for svgs that will be used more than once

emptyOP•4w ago

I got it. Thanks guys

Gaming

Programming

visibility does not work