How to Add a Drop-Down Table of Contents

  • Unknown's avatar
    yaoz889 · Member ·

    I know WordPress.com has something like: [archives format=option], which creates a drop down of all the posts.
    However, I want to create a drop down table of contents with some posts, how would I be able to do that on a page?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, W3C Schools has a good reference on creating dropdowns with CSS and HTML that will be a good guide for you. I tried it here on my test site and it worked. This would be the base CSS you would need to add to your custom CSS. 

    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

    and this would be the basic HTML you would put into the Text tab in your post or page. 

    <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

    If you are wanting to link to areas within the post or page content, then you would use Page Jumps and place anchors in the content (from within the text tab) and then put the appropriate link where the # are. You can add as many as you need, and edit the Link 1, 2 and 3, etc., to add your own labels.

  • The topic ‘How to Add a Drop-Down Table of Contents’ is closed to new replies.