Why this css hide/show code doesn't work?

HTML & CSS
1

Some time ago I was helped by some of you to realize a simple css code to hide/show div with a given class.
And in my website that code works (you can see at this url).
But today, trying to apply it to a new situation (my local life timeline webpage) I should have omitted something.

The barebone-code is the following

 <style>
 .destination {
  position: fixed;
 } /* stop jump */

 .my-toggle:hover,
 .my-toggle:focus {
  background: red;
  color: #fff;
 }

 #classa:target ~ #list .eee,
 #classa:target ~ #list .bbb,
 #classa:target ~ #list .ccc,
 #classa:target ~ #list .ddd,

 #classb:target ~ #list .ddd,
 #classb:target ~ #list .eee,
 #classb:target ~ #list .aaa,
 #classb:target ~ #list .ccc,

 #classc:target ~ #list .aaa,
 #classc:target ~ #list .ddd,
 #classc:target ~ #list .eee, 
 #classc:target ~ #list .bbb,

 #classd:target ~ #list .aaa,
 #classd:target ~ #list .eee,
 #classd:target ~ #list .ccc, 
 #classd:target ~ #list .bbb,

 #classe:target ~ #list .aaa,
 #classe:target ~ #list .ddd,
 #classe:target ~ #list .ccc, 
 #classe:target ~ #list .bbb
 {
  display: none;
 }
  </style>
 <title>highlight only some divs</title>
</head>
<body>
 <h1>some title</h1>
 <p>Show only <a class="my-toggle aaa" href="#classa">aaa</a> | <a class="my-toggle bbb" href="#classb">bbb</a> | <a class="my-toggle ccc" href="#classc">ccc</a> | <a class="my-toggle ddd" href="#classd">ddd</a> | <a class="my-toggle eee" href="#classe">eee</a> | Show <a class="my-toggle" href="#classx">all</a>.</p>
 <div class="destination" id="classa"></div>
 <div class="destination" id="classb"></div>
 <div class="destination" id="classc"></div>
 <div class="destination" id="classd"></div>
 <div class="destination" id="classe"></div>
 <div class="destination" id="classx"></div>
 <div class="aaa">
  some aaa text here
 </div>
 <div class="aaa">
  some aaa text here
 </div>
 <div class="bbb">
  some bbb text here
 </div>
 <div class="eee">
  some eee text here
 </div>
 <div class="ccc">
  some ccc text here
 </div>
 <div class="bbb">
  some bbb text here
 </div>
 <div class="ddd">
  some ddd text here
 </div>
 <div class="eee">
  some eee text here
 </div>

What I’m missing?

2

Your selectors have an ID #list in them, yet no element in the HTML has that ID.

3 Likes
3

As Sam said you need to remove #list from the selector (unless you are going to add a parent div called #list).

 #classa:target ~ .eee,
  #classa:target ~ .bbb,
  #classa:target ~ .ccc,
  #classa:target ~ .ddd,
  #classb:target ~ .ddd,
  #classb:target ~ .eee,
  #classb:target ~ .aaa,
  #classb:target ~ .ccc,
  #classc:target ~ .aaa,
  #classc:target ~ .ddd,
  #classc:target ~ .eee,
  #classc:target ~ .bbb,
  #classd:target ~ .aaa,
  #classd:target ~ .eee,
  #classd:target ~ .ccc,
  #classd:target ~ .bbb,
  #classe:target ~ .aaa,
  #classe:target ~ .ddd,
  #classe:target ~ .ccc,
  #classe:target ~ .bbb {
    display: none;
  }
1 Like
4

Perfect! It works! Thank you friends!

But I have still this question: why in my website that code works?

5

You might want to make it the same in your website.

1 Like
6

Because you have a parent div with the ID “list” on the site.

1 Like
7

Yes, indeed. But now, trying to “translate” to my life timeline, I have still problems. I will do some further attempts.
I share right now the whole code. The css:

.timeline {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
.timeline *, .timeline :after, .timeline :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
.timeline:not(.timeline--horizontal):before {
    background-color: #ddd;
    bottom: 0;
    content: '';
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
}
.timeline__wrap {
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.timeline__item {
    font-size: 16px;
    font-size: 1rem;
    padding: .625rem 2.5rem .625rem 0;
    position: relative;
    width: 50%;
    z-index: 2;
}
.timeline__item:after {
    background-color: #fff;
    border: 4px solid #ddd;
    border-radius: 50%;
    content: '';
    height: 20px;
    position: absolute;
    right: -10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    width: 20px;
    z-index: 1;
}
.timeline__item.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
}
.timeline__item.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.timeline__item--left {
    left: 0;
}
.timeline__item--right {
    left: 50%;
    padding: .625rem 0 .625rem 2.5rem;
}
.timeline__item--right:after {
    left: -10px;
}
.timeline__item--right .timeline__content:before {
    border-bottom: 10px solid transparent;
    border-right: 12px solid #ccc;
    border-left: none;
    border-top: 10px solid transparent;
    left: -12px;
}
.timeline__item--right .timeline__content:after {
    border-bottom: 9px solid transparent;
    border-right: 11px solid #fff;
    border-left: none;
    border-top: 9px solid transparent;
    left: -10px;
}
.timeline__content {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #333;
    display: block;
    padding: 1.25rem;
    position: relative;
}
.timeline__content:after, .timeline__content:before {
    content: '';
    height: 0;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    width: 0;
}
.timeline__content:before {
    border-bottom: 10px solid transparent;
    border-left: 12px solid #ccc;
    border-top: 10px solid transparent;
    right: -12px;
    z-index: 1;
}
.timeline__content:after {
    border-bottom: 9px solid transparent;
    border-left: 11px solid #fff;
    border-top: 9px solid transparent;
    right: -10px;
    z-index: 2;
}
/*.timeline__content h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 .625rem;
}*/
.timeline__content p {
    font-size: 1.4375rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
.timeline--horizontal {
    font-size: 0;
    padding: 0 3.125rem;
    overflow: hidden;
    white-space: nowrap;
}
.timeline--horizontal .timeline-divider {
    background-color: #ddd;
    display: block;
    height: 4px;
    left: 40px;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 40px;
    z-index: 1;
}
.timeline--horizontal .timeline__items {
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
    will-change: transform;
}
.timeline--horizontal .timeline__item {
    display: inline-block;
    left: 0;
    padding: 0 0 2.5rem;
    position: relative;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    vertical-align: top;
    white-space: normal;
}
.timeline--horizontal .timeline__item:after {
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 100%}
.timeline--horizontal .timeline__item .timeline__item__inner {
    display: table;
    height: 100%;
    width: 100%}
.timeline--horizontal .timeline__item .timeline__content__wrap {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
.timeline--horizontal .timeline__item .timeline__content:before {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #ccc;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 100%}
.timeline--horizontal .timeline__item .timeline__content:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 100%}
.timeline--horizontal .timeline__item--bottom {
    padding: 2.5rem 0 0;
}
.timeline--horizontal .timeline__item--bottom:after {
    top: 0;
}
.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {
    vertical-align: top;
}
.timeline--horizontal .timeline__item--bottom .timeline__content:before {
    border-bottom: 12px solid #ccc;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: none;
    bottom: 100%;
    top: auto;
}
.timeline--horizontal .timeline__item--bottom .timeline__content:after {
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: none;
    bottom: 100%;
    top: auto;
}
.timeline-nav-button {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    height: 40px;
    outline: 0;
    position: absolute;
    text-indent: -9999px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    width: 40px;
    z-index: 10;
}
.timeline-nav-button:disabled {
    opacity: .5;
    pointer-events: none;
}
.timeline-nav-button:before {
    background-position: center center;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 14px;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    width: 8px;
}
.timeline-nav-button--prev {
    left: 0;
}
.timeline-nav-button--prev:before {
    background-image: url(../images/arrow-left.svg);
}
.timeline-nav-button--next {
    right: 0;
}
.timeline-nav-button--next:before {
    background-image: url(../images/arrow-right.svg);
}
.timeline--mobile {
    padding: 0;
}
.timeline--mobile:before {
    left: 10px!important;
    margin: 0!important;
}
.timeline--mobile .timeline__item {
    left: 0;
    padding-left: 40px;
    padding-right: 0;
    width: 100%}
.timeline--mobile .timeline__item:after {
    left: 2px;
    margin: 0;
}
.timeline--mobile .timeline__item .timeline__content:before {
    left: -12px;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #ccc;
    border-left: none;
    border-top: 12px solid transparent;
}
.timeline--mobile .timeline__item .timeline__content:after {
    left: -10px;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    border-left: none;
    border-top: 10px solid transparent;
}
@-webkit-keyframes fadeIn {
    0% {
    opacity: 0;
    top: 70px;
}
100% {
    opacity: 1;
    top: 0;
}
}@keyframes fadeIn {
    0% {
    opacity: 0;
    top: 70px;
}
100% {
    opacity: 1;
    top: 0;
}
}@-webkit-keyframes liftUp {
    0% {
    top: 0;
}
100% {
    top: -15px;
}
}@keyframes liftUp {
    0% {
    top: 0;
}
100% {
    top: -15px;
}
}


/* mie aggiunte */

.lavoro div {border-right: yellow solid 10px;}
.studi div {border-right: orange solid 10px;}
.fede div {border-right: red solid 10px;}
.viaggi-vacanze div {border-right: blue solid 10px;}
.oggetti div {border-right: olive solid 10px;}

.timeline__content {box-shadow: gray 2px 3px 2px;}

img {max-width: 150px; max-height: 200px;}
#container {background: white:}
body {background-image: radial-gradient(white, #BBB6AE);}


/* per selezionare cosa vedere BEGIN */
 .destination {
  position: fixed;
 } /* stop jump */
 
 .my-toggle:hover,
 .my-toggle:focus {
  background: red;
  color: #fff;
 }
 
 #classa:target ~ .oggetti,
 #classa:target ~ .studi,
 #classa:target ~ .lavoro,
 #classa:target ~ .viaggi-vacanze,
 
 #classb:target ~ .viaggi-vacanze,
 #classb:target ~ .oggetti,
 #classb:target ~ .fede,
 #classb:target ~ .lavoro,
 
 #classc:target ~ .fede,
 #classc:target ~ .viaggi-vacanze,
 #classc:target ~ .oggetti, 
 #classc:target ~ .studi,
 
 #classd:target ~ .fede,
 #classd:target ~ .oggetti,
 #classd:target ~ .lavoro, 
 #classd:target ~ .studi
 
 #classe:target ~ .fede,
 #classe:target ~ .viaggi-vacanze,
 #classe:target ~ .lavoro, 
 #classe:target ~ .studi
 {
  display: none;
 }

 header#main {
    position: sticky; 
    height: 50px;
    top: 0px;
    z-index: 4;
    background: white;
}
 
/* per selezionare cosa vedere END */

and the php

<header id="main">
<h1 class="panel-title">la mia vita</h1>
<p>Mostra solo <a class="my-toggle fede" href="#classa">fede</a> | <a class="my-toggle studi" href="#classb">studi</a> | <a class="my-toggle lavoro" href="#classc">lavoro</a> | <a class="my-toggle viaggi-vacanze" href="#classd">viaggi-vacanze</a> | <a class="my-toggle oggetti" href="#classe">oggetti</a> | Mostra <a class="my-toggle" href="#classx">tutto</a></p>
 </div>

   <div class="destination" id="classa"></div>
   <div class="destination" id="classb"></div>
   <div class="destination" id="classc"></div>
   <div class="destination" id="classd"></div>
   <div class="destination" id="classe"></div>
   <div class="destination" id="classx"></div>
 
 </header>

        <div class="container">
			<div class="panel panel-default">
                <div class="panel-body">
                	<div class="timeline">
                        <div class="timeline__wrap">
                            <div class="timeline__items">
                            <?php
                            foreach($result as $row)
                            {
                            ?>
      <div class="timeline__item <?php echo $row["tipologia"]; ?>">
                                    <div class="timeline__content">
                                    	<h2><?php echo $row["titolo"]; ?></h2>
                                    	<p><?php echo "$row[data_inizio] / $row[data_fine]"; ?></p>
                                    	<p><?php echo $row["descrizione"]; ?><img src="<?php echo $row["imagelink"]; ?>" onclick="onClick(this)"  /></p>
                                    </div>
                                </div>
                            <?php
                            }
                            ?>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
		</div>

		
		
    </body>  
</html>

<script>
$(document).ready(function(){
	/*timeline(document.querySelectorAll('.timeline'), {
        mode: 'horizontal',
	    visibleItems: 4,
	    forceVerticalWidth: 800
    });*/
    //jQuery('.timeline').timeline();
    jQuery('.timeline').timeline({
	    mode: 'vertical',
	    visibleItems: 4,
	    //forceVerticalWidth: 300
	});
});

</script>
8

I don’t see #list in your HTML there :slight_smile:

9

For this to work the structure needed is that #classa and .oggetti are siblings.

In your example #classa has no siblings called .oggetti. Indeed your #classa (and the other selectors) are all trapped inside your header. They have no way to access content outside the header (that’s not strictly true as the :has selector would work here but is not well supported yet).

Therefore those #classa elements need to be outside the header then you will be able to find content in the sibling called container.

#classa:target ~ .container .oggetti,

Assuming that .ogertti is inside the container element as I didn’t see it there.

1 Like
10

Thank you. Indeed, besides what you said (.container), I had to put the <div class="destination" id="classa"></div> outside the <header>.

<header id="main">
  <h1 class="panel-title">la mia vita</h1>
  <p>Mostra solo <a class="my-toggle fede" href="#classa">fede</a> | <a class="my-toggle studi" href="#classb">studi</a> | <a class="my-toggle lavoro" href="#classc">lavoro</a> | <a class="my-toggle viaggi-vacanze" href="#classd">viaggi-vacanze</a> | <a class="my-toggle oggetti" href="#classe">oggetti</a> | Mostra <a class="my-toggle" href="#classx">tutto</a></p>
 </header>

   <div class="destination" id="classa"></div>
   <div class="destination" id="classb"></div>
   <div class="destination" id="classc"></div>
   <div class="destination" id="classd"></div>
   <div class="destination" id="classe"></div>
   <div class="destination" id="classx"></div>

Now it works!!
Thank you a lot again!

1 Like
11

Fine tuning: this code in a simple file works:

 #classa:target ~ :not(.aaa),
 #classb:target ~ :not(.bbb),
 #classc:target ~ :not(.ccc),
 #classd:target ~ :not(.ddd),
 #classe:target ~ :not(.eee)

Instead of

#classa:target ~ .eee,
  #classa:target ~ .bbb,
  #classa:target ~ .ccc,
  #classa:target ~ .ddd,
  #classb:target ~ .ddd,
  #classb:target ~ .eee,
  #classb:target ~ .aaa,
  #classb:target ~ .ccc,
  #classc:target ~ .aaa,
  #classc:target ~ .ddd,
  #classc:target ~ .eee,
  #classc:target ~ .bbb,
  #classd:target ~ .aaa,
  #classd:target ~ .eee,
  #classd:target ~ .ccc,
  #classd:target ~ .bbb,
  #classe:target ~ .aaa,
  #classe:target ~ .ddd,
  #classe:target ~ .ccc,
  #classe:target ~ .bbb

But in my life timeline doesn’t work this:

 #classa:target ~ .container :not(.fede),
 #classb:target ~ .container :not(.studi),
 #classc:target ~ .container :not(.lavoro),
 #classd:target ~ .container :not(.viaggi-vacanze),
 #classe:target ~ .container :not(.oggetti)

instead of

#classa:target ~ .container .oggetti,
 #classa:target ~ .container .studi,
 #classa:target ~ .container .lavoro,
 #classa:target ~ .container .viaggi-vacanze,
 
 #classb:target ~ .container .viaggi-vacanze,
 #classb:target ~ .container .oggetti,
 #classb:target ~ .container .fede,
 #classb:target ~ .container .lavoro,
 
 #classc:target ~ .container .fede,
 #classc:target ~ .container .viaggi-vacanze,
 #classc:target ~ .container .oggetti, 
 #classc:target ~ .container .studi,
 
 #classd:target ~ .container .fede,
 #classd:target ~ .container .oggetti,
 #classd:target ~ .container .lavoro, 
 #classd:target ~ .container .studi
 
 #classe:target ~ .container .fede,
 #classe:target ~ .container .viaggi-vacanze,
 #classe:target ~ .container .lavoro, 
 #classe:target ~ .container .studi

I don’t understand why …

12

Do you have a common selector to apply to the :not selector ?

Otherwise any descendant element it sees will pass the test.

e.g.you need to make it explicit as your element may be a far descendant.

#classa:target ~ .container .xxx:not(.fede),.

Add a common class to all the targeted elements (I just used xxx above as an example).

1 Like
13

Perfect! I solved this way, as you suggested:

 #classa:target ~ .container .timeline__item:not(.fede),
 #classb:target ~ .container .timeline__item:not(.studi),
 #classc:target ~ .container .timeline__item:not(.lavoro),
 #classd:target ~ .container .timeline__item:not(.viaggi-vacanze),
 #classe:target ~ .container .timeline__item:not(.oggetti)
1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.