Displaying only the wanted div based on menu choice

Question

Im fairly new to programming in HTML, and I want to create a webpage that displays what i have within a tag based on menu choice.

in meta i have something like this:

<ul class="dropdown-menu" role="menu">
    <li><a href="#chap4">Chapter 4</a></li>
    <li><a href="#chap5">Chapter 5</a></li>
</ul>

Further down the code, I have something like:

<div class="chap4">
    content
</div>

<div class="chap5">
    content
</div>

Is there any way i can get the page to display only the content of when I press the menu link to chapter 4, and only the content of chapter 5 when I press the menu link for chapter 5?

Any help will be highly appreciated!

Answer 1

You could use :target changing classes with ids.

#content > div:not(:target) {
  display: none;
}

<ul class="dropdown-menu" role="menu">
  <li><a href="#chap4">Chapter 4</a>
  </li>
  <li><a href="#chap5">Chapter 5</a>
  </li>
</ul>

<div id="content">
  <div id="chap4">
    content 4
  </div>

  <div id="chap5">
    content 5
  </div>
</div>

Reference: :target