CSS (action selector) :target not working

Question

.accordion-item:target .answer {
  max-height: 20rem;
}

<div class="accordion-item" id="question1">
  <a class="accordion-link" href="#question1">What is COVID-19?
    <ion-icon class="ion" name="add-outline"></ion-icon>
    <ion-icon class="ion" name="remove-outline"></ion-icon>
  </a>
  <div class="answer">
    <p>
      COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
    </p>
  </div>
</div>

The height of the answer class isn't getting maximised to 20rem after I click on that class (accordion-item).

Your css selector is wrong, it should be `.accordion-item:target + .answer` giving `.answer` element is not a direct child of `.accordion-item`. https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean — Mr T, Mar 19 '20 at 09:23
I tried exact same thing you suggested but it isn't working! — Sagar Kulkarni, Mar 19 '20 at 09:29
The class .answer resides in .accordion-item ,so if I use + it means that .answer is next outside element of .accordion-item — Sagar Kulkarni, Mar 19 '20 at 09:31
I can see that now, got it wrong because of the aligning of your html. — Mr T, Mar 19 '20 at 09:34
Sorry I couldn't align all those properly. One interesting I found out - the selector :hover is working perfectly fine but :target isn't ! — Sagar Kulkarni, Mar 19 '20 at 09:35
Seems to be working https://jsfiddle.net/k402h8vy/. Probably the max-height isn't working properly because of some other code — GreyRoofPigeon, Mar 19 '20 at 09:36
What about @Nitheesh' answer does not work? The problem is that you haven't told us what you're expecting. Are you perhaps trying to restrict the height when the link is NOT clicked? — Mr Lister, Mar 19 '20 at 10:02

Nitheesh · Accepted Answer · 2020-03-19T10:02:41.433

One simple mistake remove # from the id field. Put id="question1" not id="#question1"

Working example.

*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing: inherit;
}

html{
    font-family: 'Roboto',sans-serif;
    font-size: 10px;
    box-sizing: border-box;
}

section{
    width:100%;
    height:100vh;
    background-color: #3c4053;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    width:100%;
    max-width: 80rem;
    margin:0 auto;
    padding:0 1.5rem;
}

.accordion-item{
    background-color: #283042;
    border-radius: .4rem;
    margin-bottom: 1rem;
    padding:1rem;
    box-shadow: 0.5rem 2px 0.5rem rgba(0,0,0,0.1);
}

.accordion-link{
    font-size: 1.6rem;
    color:rgba(255,255,255,0.8);
    text-decoration: none;
    background-color:#283042;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.ion{
    color:#e7d5ff;
    padding:.5rem;
}

.ion[name="remove-outline"]{
    display:none;
}

.answer::before{
    content: "";
    position: absolute;
    width:0.6rem;
    height: 90%;
    background-color:#8fc460;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.answer p{
    color:rgba(255,255,255,0.6);
    font-size: 1.4rem;
    padding:2rem;
}

.answer {
    max-height: 0;
    overflow: hidden;
    position:relative;
    background-color: #212838;
    transition:max-height 650ms;
}

.accordion-item:target .answer{
    max-height:20rem;
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

.accordion-item:target .ion[name="add-outline"]{
    display:none;
}

.accordion-item:target .ion[name="remove-outline"]{
    display:block;
}

<section>
    <div class="container">
        <div class="accordion">
            <div class="accordion-item" id="question1">
                <a class="accordion-link" href="#question1">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>

            <div class="accordion-item" id="question2">
                <a class="accordion-link" href="#question2">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>

            <div class="accordion-item" id="question3">
                <a class="accordion-link" href="#question3">
                    What is COVID-19?
                    <ion-icon class="ion" name="add-outline"></ion-icon>
                    <ion-icon class="ion" name="remove-outline"></ion-icon>
                </a>
                <div class="answer">
                    <p>
                        COVID-19 is the infectious disease caused by the most recently discovered coronavirus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Ion Icons -->
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Thank You so much ..it worked! I feel silly for that silly mistake (LOL) — Sagar Kulkarni, Mar 19 '20 at 10:21
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209916/discussion-between-sagar-kulkarni-and-nitheesh). — Sagar Kulkarni, Mar 19 '20 at 10:24
@SagarKulkarni thank you. Please approve my answer, if your requirement is satisfied. — Nitheesh, Mar 19 '20 at 10:31

CSS (action selector) :target not working

1 Answers1