How to create a dropdown toggle effect

Question

I like the dropdown effect on this website biblegateway.com . First, I'm not sure whether it's appropriate to post links to other sites. I don't own this site, I just like the effect and was trying to replicate it for a site I'm building for books.

The effect is below the search bar when you click the dropdown list button. It allows you to view the list of books and then allows you to view the chapters when you click on any book.

Sorry for being new. I really need this I like it and would be very good for my books. I would like to list them just like on the site, for the old and new version on the right.

I have tried despite being new and here is how far I have come. Please help me finish this I have already spent days getting to this point. Thanks

$(document).ready(function() {
  $("#toggle1").click(function() {
    $(".bbl1").toggle()
  });
});

$(document).ready(function() {
  $("#toggle2").click(function() {
    $(".bbl2").toggle()
  });
});

$(document).ready(function() {
  $("li.togglebk1").click(function() {
    $(".bbl-chapters-container1").toggle()
  });
});

$(document).ready(function() {
  $("li.togglebk2").click(function() {
    $(".bbl-chapters-container2").toggle()
  });
});

https://codepen.io/danongu/pen/YzXvpoJ

May I ask if you want to solve this using jquery / Javascript or would you be fine with just CSS to? Also, don't worry to much, of course you may link to a third party page and all here started at some point :) — Phy, Mar 18 '20 at 22:13
Whichever solution is okay with me as long as the effect is similar. I didn't know you can do this with CSS only. But it doesn't matter. — , Mar 18 '20 at 22:48
There are MANY solutions for your problem, search codepen for 'dropdown menu'. Furthermore, I just answered a Q here on SO showing an 'open and click to go somewhere else solution'. Not a menu, but the principle is the same: [SO60723244](https://stackoverflow.com/questions/60723244/how-to-display-a-div-when-hovering-over-an-image-using-css-html-transitions/60723884#60723884). Click one item, show another and when click on that, close and go.... — Rene van der Lende, Mar 18 '20 at 23:30

score 0 · Answer 1 · answered Mar 18 '20 at 22:43

Take a look at the following demo on JSFiddle that I've created. This solution uses jQuery for the drop down animation.

Each book in the list has a custom HTML attribute book-chapters which tells how many chapters this specific book has. When the book is clicked, that value is used to dynamically generate the list of chapters at the very bottom. If you keep your books stored in a database, you will have to fill in this attribute with the data from your database, instead of having it just "hard coded".

It's now up to you to bring this to life with real content and a nice styling :)

I know how to add php code that will dynamically get the chapters and was wondering how that would fit into this beautiful code. Your solution was helpful but I'm having some problem understanding how it's pulling the chapters. — , Mar 19 '20 at 08:59

thoerni · Answer 2 · 2020-03-18T23:56:55.230

You can use the Clip-Path CSS Property + JS toggle function and basically double it.

For understanding how Clip-Path works visit the dedicated Mozilla site for explanation or this site for testing and playing around with it.

function togglemenu(){
  document.querySelector("#dropdown").classList.toggle("active");
  document.querySelector("#dropdownTwo").classList.remove("active")
}

document.querySelectorAll(".item").forEach(function(item){
  item.addEventListener("click", function(){
    dropTwo = document.querySelector("#dropdownTwo")
    dropTwo.classList.add("active")
    dropTwo.innerHTML = this.getAttribute("value")
  })
})

#trigger{
  background: #555;
  color: white;
  cursor: pointer;
}
 
#dropdown{
  clip-path: inset(0 0 100% 0);
  user-select: none;
  transition: 0.5s;
}
 
#dropdown.active{
  clip-path: inset(0 0 0 0);
  transition: 0.5s;
  /* user-select: all;   not necessary unless you really want the user to be able to copy the menu */ 
}

#dropdownOne{
  background: #222;
  color: white;
}

#dropdownTwo{
  background: #888;
  color: white;
  clip-path: inset(0 0 100% 0);
  user-select: none;
  transition: 0.5s;
}

#dropdownTwo.active{
  clip-path: inset(0 0 0 0);
  transition: 0.5s;
  /* user-select: all; */ 
}

<div id="trigger" onclick="togglemenu()">Click me</div>
<div id="dropdown">
  <div id="dropdownOne">
    <div class="item" value="7">Dropdown 1</div>
    <div class="item" value="2">Dropdown 2</div>
    <div class="item" value="9">Dropdown 3</div>
    <div class="item" value="1">Dropdown 4</div>
    <div class="item" value="5">Dropdown 5</div>
    <div class="item" value="8">Dropdown 6</div>
  </div>
  <div id="dropdownTwo"></div>
</div>

Two important things:

1) For the dropdown to animate you have to use the transition property to make it fade.
2) Make sure to disable user-select while the menu is closed, otherwise users would still be able to select the text of your dropdown and copy it, even if they dont see it.

Finally, there probably is a shorter and cleaner way to do this with libraries and other stuff. But for learning, doing it the classic way is probably the best way to understand how everything works.

thanks. Can I add php code inside the value to dynamically get the content? I am asking this because the code is basically pulling the content of the value attribute and I'd avoid hard coding the chapters into the value attribute. Possible? — , Mar 19 '20 at 08:51
Yesn't. If you just put PHP Code into the HTML, the Page would have to refresh each time you want to get the Content of the Menu you clicked on. For this, you would have to use AJAX (Javascript) and make a PHP request via AJAX. To learn more about AJAX and PHP I would recommend [this](https://youtu.be/82hnvUYY6QA) 1 hour YouTube Tutorial, really clear to understand in my opinion (and you dont have to watch the full hour, he is showing different examples). For an AJAX Tutorial with JQuery there is a lot on YouTube aswell, really just look around there. — thoerni, Mar 19 '20 at 10:36

score 0 · Answer 3 · answered Mar 18 '20 at 23:29

0

One thing is you don't need to put each function inside of it's one $(document).ready you can put it all in the same one.

If you're looking to create a front-end website with code, I recommend using a front-end library like Bootstrap/HydroUI

answered Mar 18 '20 at 23:29

Matt Murphy

90
7

score 0 · Answer 4 · answered Mar 19 '20 at 12:52

I'm not a fan of toggle(). I'd make all the chapter elements display:none when a book was selected, and then make just the right one display:block.

<ul>
    <li class="book" bookid="genesis">Genesis</li>
    <li class="book" bookid="daniel">Daniel</li>
</ul>
<div id= "genesis" class="chapters" style="display:none;">
The Genesis chapters go here.
</div>
<div id= "daniel" class="chapters" style="display:none;">
The Daniel chapters go here.
</div>

$("body").on("click", ".book", function() {
  $(".chapters").css("display","none");
  var book_id = $(this).attr("bookid");
  $("#" +book_id).css("display","block");
});

Here's a fiddle https://jsfiddle.net/tes7gd5h/

How to create a dropdown toggle effect

4 Answers4