Your :targets are children of .text. Update your css accordingly.

EG:

/* hide all .text child divs: */
.text div {display: none;}
/* show all .text child divs if .text is the target: */
.text:target div {display: block;}
/* show the specific target .text child div */
.text div:target {display: block;}

<div>
   <a href="#everything">Everything</a>
   <a href="#fruits">Fruits</a>
   <a href="#vegetables">Vegetables</a>
</div>

<div class="text" id="everything">
  <div id="fruits">
     ...fruits...
  </div>
  <div  id="vegetables">
    ...veg...
   </div>
</div>

I have an horizontal scrolling bar and there are some anchor tags within. The href’s of these anchor tags are the ids of some div tags:

/*horizontal bar*/
<div>
   <a href="#everything">Everything</a>
   <a href="#fruits">Fruits</a>
   <a href="#vegetables">Vegetables</a>
</div>

/*text*/
<div class="text" id="everything">
  <div id="fruits">
     ...
  </div>
  <div  id="vegetables">
    ...
   </div>
</div>

I’ve done this in css:

.text {
    display: none;}
.text:target {
    display: block;}

I tried everything, this work just when you clik on the “everything” anchor tag, but I want to do that If you click on “everything” It display the full text, but if you click on “fruits” it displays only the text about the fruits and hide the vegetables’ text, how can i make It work?