I can’t make unsolicited cards disappear

Question

I can’t make unsolicited cards disappear

Asked 4 years, 10 months ago

Viewed 42 times

-1

Hello, I have a series of cards that I have already put the respective ids, but when I click on the menu option that I want it just scrolls to the card with the id, but actually I would like all the others to disappear and only the ones of the id called stay. Can you help me? :)

<div class="list-group menu-casos" style="float: left">
            <a href="#varejo" class="list-group-item active">Varejo</a>
            <a href="#industria" class="list-group-item">Indústria</a>
            <a href="#marketing" class="list-group-item">Marketing</a>
            <a href="#seguro" class="list-group-item">Seguro</a>
            <a href="#educacao" class="list-group-item">Educação</a>
            <a href="#saude" class="list-group-item">Saúde</a>
            <a href="#financas" class="list-group-item">Finanças</a>
            <a href="#telecom" class="list-group-item">Telecom</a>
          </div>

<div class="card2 shadow" id="varejo" style="margin-top: 50px">
            <h2>E-commerce</h2>
            <pre>Texto</pre>
            <a href="#support" class="btn btn-primary">Saiba mais</a>
          </div>
          <div class="card2 shadow" id="varejo">
            <h2>Lojas Físicas</h2>
            <pre>Texto</pre>
            <a href="#support" class="btn btn-primary">Saiba mais</a>
          </div>
          <div class="card2 shadow" id="varejo">
            <h2>Serviços de Consumo</h2>
            <pre>Texto</pre>
            <a href="#support" class="btn btn-primary">Saiba mais</a>
          </div>

1

Dude you have to put the full code there, at least in a way that simulates your problem, only with this block of code can not help you much

– hugocsl

2019/09/06 at 18:48
If you don’t show the javascript you’re using to change the behavior of the page it will be difficult to help you.

– fernandosavio

2019/09/06 at 19:03
@hugocsl Pus

– Thales Vinicius

2019/09/06 at 19:06
@fernandosavio am not using js, only HTML

– Thales Vinicius

2019/09/06 at 19:07
I strongly suggest you take a look at the link to get an idea of what you can and cannot do with Html: https://developer.mozilla.org/en-US/docs/Web/HTML

– LeAndrade

2019/09/06 at 19:19
If you’re not using JS you can’t expect a different behavior than HTML provides (maybe some magic with CSS, but it’s not ideal). I mean, you have nothing to change the default behavior.

– fernandosavio

2019/09/06 at 19:26

Show 1 more comment

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-06T19:26:05+00:00

Just use :target type the href must be the same as id.

Ai in CSS only the id:target {display:block}

#varejo, 
#industria, 
#marketing {
    display: none;
}
#varejo:target , 
#industria:target , 
#marketing:target {
    display: block;
}

<div class="list-group menu-casos" style="float: left">
    <a href="#varejo" class="list-group-item active">Varejo</a>
    <a href="#industria" class="list-group-item">Indústria</a>
    <a href="#marketing" class="list-group-item">Marketing</a>
</div>

<div class="card2 shadow" id="varejo" style="margin-top: 50px">
    <h2>E-commerce</h2>
    <pre>Texto</pre>
    <a href="#support" class="btn btn-primary">Saiba mais</a>
</div>
<div class="card2 shadow" id="industria">
    <h2>Lojas Físicas</h2>
    <pre>Texto</pre>
    <a href="#support" class="btn btn-primary">Saiba mais</a>
</div>
<div class="card2 shadow" id="marketing">
    <h2>Serviços de Consumo</h2>
    <pre>Texto</pre>
    <a href="#support" class="btn btn-primary">Saiba mais</a>
</div>