我有一个网站，其中有几个可扩展内容的部分。该网站的密码笔为here。我在网站的两个部分中，我希望用户单击一些导致内容显示的内容。例如，当用户单击学校徽标时，内容将展开以显示学校说明和报价。当您单击另一个徽标时，第一个单击的徽标下的内容会消失，并且会出现新单击的徽标的内容。活动列表也是如此。
我有它，因此单击这些项目时内容显示和消失。问题是，当您单击徽标或活动并显示内容时，它将日志或活动推到浏览器的视线之外，因此内容位于窗口的最顶部，您看不到什么学校或它所指的活动。有什么办法可以解决这个问题？
我确定这可以使用JavaScript来完成，但这是针对不讨论JS的基础课的作业，因此我不确定教授是否会赞成我使用JS。因此，我正在寻找仅CSS解决方案的原因。
我对复选框hack有点熟悉。但是，当您使用它并单击第二项时，似乎第一项中的内容不会消失，因此我不使用它的原因。
这就是我认为与代码相关的部分。显然，这个问题的代码太长了。 HMTL
<div id="container">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#timeline">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schooling">Schooling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#activities">Activities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#interests">Interests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#family">Family</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#friends">Friends</a>
</li>
</ul>
</nav>
<div class="main">
********
</div>
<div id="schooling">
<h2 class="section-header">Where did Bethany go to school?</h2>
<p class="click-stmt">Click on a logo to learn more</p>
<a href="#expando1"><img class="school-logo" src="#" alt="logo for Our Lady of Faith"></a>
<!-- no image yet for first link -->
<div class="expando" id="expando1">
<p>Bethany began school at the age of 6. She was homeschooled through Our Lady of Faith
Catholic Homeschool from Kindergarten through Fourth Grade. After a brief stint in
public school, she returned to Our Lady of Faith from Eighth Grade until her
graduation from High School.</p>
<cite>Bethany says:</cite>
<blockquote>
<p>I really loved being homeschooled. In public school a lot of the teachers don't care
about you, and the kids can be really cruel. Plus, if you fall behind, it is hard to
catch up. In Homeschool, you can stay on a topic until you master it. Plus the other
kids I've met in the Homeschool community are really nice.</p>
</blockquote>
</div>
<a href="#expando2"><img class="school-logo" src="https://dtarvin.github.io/bioSite/images/picotte_elementary_logo.png" alt="logo for Picotte Elementary" width=200px></a>
<div class="expando" id="expando2">
<p>Bethany attended Picotte Elementary from fourth through sixth grade. during
that time she took violin lessons and participated in the annual singing
program. She even had a solo in fourth grade, something that had not
occurred before for the program (solos were usually given to sixth
graders). Her class also took a tour of the Nebraska State Capitol
Building.</p>
<cite>Bethany says:</cite>
<blockquote>
<p>I really enjoyed singing in the program, and I enjoyed my trip to the
State Capitol. The teachers were very friendly.</p>
</blockquote>
</div>
<a href="#expando3"><img class="school-logo" src="https://dtarvin.github.io/bioSite/images/Beveridge_magnet_logo.png" alt="logo for Beveredge Middle School"></a>
<div class="expando" id="expando3">
<p>Bethany went to Beveridge Middle School for Seventh Grade. During that
time she participated in a production of Little Shop of Horrors and ___.</p>
<cite>Bethany says:</cite>
<blockquote>
<p>I really enjoyed being involved with the musicals at Beveridge.
It was my first experience acting on stage. I hope I get a chance
to do it again sometime.</p>
</blockquote>
</div>
<a href="#expando4"><img class="school-logo" src="https://dtarvin.github.io/bioSite/images/metropolitan_community_college_logo.png" alt="logo for Metropolitan Community College" width=200px></a>
<div class="expando" id="expando4">
<p>Bethany is currently a student at Metropolitan Community College in Omaha, Nebraska.
She actually started attending Metro her senior year of high school by means of a Nebraska
Ace Scholarship. She is studying Early Childhood Development.</p>
<cite>Bethany says:</cite>
<blockquote>
<p>I'm really enjoying my classes at Metro. I do find college a bit of a challenge,
but it's definitely a challenge I'm prepared for. My classes have all been great so
far, and I'm meeting lots of new people.</p>
</blockquote>
</div>
</div>
<div id="activities">
<h2 class="section-header">What activities has Bethany been involved in?</h2>
<p class="click-stmt">Click on an activity to learn more</p>
<a href="#expando5">
<h3>Turner Dance</h3>
</a>
<div class="expando" id="expando5">
<p>Bethany has been dancing since she was 3 years old. She is currently a student and a
teacher's assistant at Turner Dance.</p>
<blockquote>
<p>Bethany is the most pure in heart person I have ever met.
Children are magically drawn to her innate ability to
engage their spirits and creativity. Bethany is a very
empathetic individual and would do anything in her power
to help someone.</p>
</blockquote>
<cite>- Diane Turner, owner of Turner Dance</cite>
</div>
<a href="#expando6">
<h3>St. Vincent de Paul Youth Group</h3>
</a>
<div class="expando" id="expando6">
<p>Bethany has been involved in her church's youth group throughout high school.
Now that she has graduated, she assists with the program.</p>
<blockquote>
<p>Bethany definitely has a strong faith. She participated in the group very
well.</p>
</blockquote>
<cite>- Steve Nespor, former director, St. Vincent de Paul Youth Group</cite>
</div>
<a href="#expando7">
<h3>Camp Fun 'n Faith</h3>
</a>
<div class="expando" id="expando7">
<p>Bethany has attended summer camp at Pro Sanctity's Camp Fun 'n Faith every year since
2011. For the last four years, she has also worked as a junior counselor for the
younger kids' day camp. Bethany hopes to continue working as a full counselor in the
coming years.</p>
<blockquote>
<p>Bethany is a treasure. She is always so helpful and a joy to be around.
She works very hard as a junior counselor, and she always makes things fun for the
kids in her group.</p>
</blockquote>
<cite>- Oblate, Pro Sanctity</cite>
</div>
<a href="#expando8">
<h3>Steubenville Conference</h3>
</a>
<div class="expando" id="expando8">
<p>Every year, Steubenville College in Ohio presents a series of conferences around the
country. Bethany has been able to attend for the last three years. She even got to
see Matt Maher in concert one of the years!</p>
<blockquote>
<p>I was a chaperone during a few of the conferences Bethany attended. I could
tell she was having a lot of fun and that the experience was really strengthening her faith.</p>
</blockquote>
<cite>- Michelle Ramaekers</cite>
</div>
</div>
<div id="interests">
********
<div id="family">
********
</div>
<div id="friends">
<h2 class="section-header">What do Bethany's friends say about her?</h2>
<p class="click-stmt">Click on an image to learn more</p>
<figure>
<a href="#expando9"><img src="https://dtarvin.github.io/bioSite/images/austin.jpg" alt="picture of Bethany's friend Austin" width="200px"></a>
<figcaption>Austin</figcaption>
</figure>
<div class="expando" id="expando9">
<blockquote>
<p>Bethany has been a great friend to me. I hope when I
have kids they grow up to be like Bethany!</p>
</blockquote>
</div>
<figure>
<a href="#expando11"><img src="https://dtarvin.github.io/bioSite/images/sapphire.jpg" alt="picture of Bethany's friend Sapphire" width="200px"></a>
<figcaption>Sapphire</figcaption>
</figure>
<div class="expando" id="expando11">
<blockquote>
<p>Bethany is so sweet and so fun to do things with. I'm very
grateful to have a friend like her.</p>
</blockquote>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
color: #222f5b;
background-color: #946b2d;
height: 100%;
}
p {
font-family: 'Dosis', sans-serif;
font-size: 1.25em;
width: 80%;
margin: auto;
}
.school-logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.section-header {
text-align: center;
}
blockquote {
background: #5d5d5d;
border-radius: 5px;
width: 40%;
margin: auto;
}
/* cite {
width: 40%;
margin: auto;
} */
blockquote p {
padding: 15px;
}
.expando {
display: none;
}
.expando:target {
display: block;
}
.click-stmt {
text-align: center;
}