drop down effect for a html div on both mouse over and click

Question

one of the answer in this question is using pure css approach:

HTML:

<div id="summary">Sample</div>
<div id="detail">Detail of this summary</div>

CSS:

> #summary:hover + #detail, #detail:hover {   display: block; }
> #detail {   display: none; }

my question is how can we include the click event where it is act like a on-off button?

Nandita Sharma · Accepted Answer · 2018-06-23T05:15:07.353

3

Make the #summary div an anchor and add styles on it focus also.

#summary:hover+#detail,
#detail:hover {
  display: block;
}

#detail {
  display: none;
}

#summary:focus+#detail,
#detail:focus {
  display: block;
}

<a id="summary" href="javascript:void(0);">Sample</a>
<div id="detail">Detail of this summary</div>

.summary:hover+.detail,
.detail:hover {
  display: block;
}

.show.detail {
  display: block;
}

.detail {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample1</a>
  <div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample2</a>
  <div class="detail">Detail of this summary</div>
</div>

<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample3</a>
  <div class="detail">Detail of this summary</div>
</div>

<script>
  $(".summary").on("click", function() {
    $(this).next().toggleClass("show");
  })
</script>

edited Jun 23 '18 at 05:15

answered Jun 23 '18 at 02:12

Nandita Sharma

13,287
2
22
35

can we make it: first click it will show the block and then the click will hide the block? – user466130 Jun 23 '18 at 03:20
the idea is like let say i have more than one "Sample" link. I wish i can display the summary block for both "Sample" at the same time. – user466130 Jun 23 '18 at 03:33
You will have to use js/jquery for it. Cant be done with CSS only.Check my updated answer – Nandita Sharma Jun 23 '18 at 04:43
it lost hover-to-display capability. is it possible to maintain both focus and hover feature. i think it is good for user experience. – user466130 Jun 23 '18 at 05:03
Check the second snippet again. It is working as you wanted – Nandita Sharma Jun 23 '18 at 05:09
looks great. where should i put the first block of second snippet? sorry for dumb question i have no knowledge on javascript :) – user466130 Jun 23 '18 at 05:13
1

Put it in a script tag just before the closing body tag of html. Or you can also create a separate .js file and include it at the same place as i mentioned the script tag – Nandita Sharma Jun 23 '18 at 05:16
one more dumb question, why does the sequence important here? i try this code in https://codepen.io/zh1611/pen/RJxeGg and put second script tag at Js field. it is not working as expected. but when i move it to the bottom of HTML field it works. i am developing webapp using dash plotly, i find no easy way to implement this code. – user466130 Jun 23 '18 at 15:49
You dont need script tag when you are writing it directly in js section. Check this https://codepen.io/anon/pen/xzzXmN – Nandita Sharma Jun 23 '18 at 15:54
it work in my codepen now :) but too bad i am still having problem in my webapp. are you familiar with dash? – user466130 Jun 23 '18 at 16:09
dash is a package to enable user develop web app using pure python. most of the frequent use HTML tag was implemented in dash_html_component package. the script tag was wrapped in https://github.com/plotly/dash-html-components/blob/master/src/components/Script.react.js. – user466130 Jun 23 '18 at 16:19
No i am sorry not familiar with dash :( You should try searching about it on internet, m sure you'll find something – Nandita Sharma Jun 23 '18 at 16:22

zer00ne · Answer 2 · 2018-06-23T06:59:30.797

CSS Solution

Use a checkbox and sync it to a label. The checkbox can be hidden so it appears that the label is the only button.

<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>

label for attribute value must match the checkbox's id as demonstrated above.

Place the content below the checkbox. Set its max-height: 0; and overflow:hidden

<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>

<article class='content'>...</article>

Set the following CSS ruleset:

 #ID:checked + label + .content { max-height: 1000px}

The + is an Adjacent Sibling Combinator it basically targets the immediate sibling to the right or below a selector (basically the next element).

The demo follows the basic concept as described above, but there are more elements and transitions so be aware of positions and how they relate to the CSS when checkbox is :checked and when it isn't.

Demo

*,
*:before,
*:after {
  margin: 0;
  padding: 0
}

.menu {
  margin: 20px auto;
  visibility: hidden;
  width: 92%;
}

.trigger {
  visibility: visible;
}

.trigger label {
  display: block;
  min-height: 20px;
  cursor: pointer;
  border: 3px ridge crimson;
  border-radius: 4px;
  padding: 3px 0 0 5px;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: all .75s;
}

img {
  display: block;
  margin: 5px 5px 0;
  float: right;
}

#chx:checked+.menu .trigger,
.trigger:hover {
  background: rgba(0, 0, 0, 0.8);
  color: orangered;
}

#chx:checked+.menu .content,
.trigger:hover+.content {
  max-height: 1000px;
  transition: all .75s;
  visibility: visible
}

<input id='chx' type='checkbox' hidden>
<figure class='menu'>
  <figcaption class='trigger'>
    <label for="chx">TRIGGER</label>
  </figcaption>
  <article class='content'>
    <img src='https://yt3.ggpht.com/-7DsR5xtp9pM/AAAAAAAAAAI/AAAAAAAAAAA/nO22Um9xa28/s100-mo-c-c0xffffffff-rj-k-no/photo.jpg'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </article>
</figure>

score 1 · Answer 3 · answered Jun 23 '18 at 02:11

So you want to include the menu only on a click? I found a way to do it, only with a small amount of JavaScript:

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

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

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Put this into your page and it'll work.

how about hover? it seems like only has click function. – user466130 Jun 23 '18 at 03:22 — user466130, Jun 23 '18 at 03:22
The question was about click, so I responded with click. – Jack Bashford Jun 23 '18 at 06:34 — Jack Bashford, Jun 23 '18 at 06:34

drop down effect for a html div on both mouse over and click

3 Answers3

CSS Solution

Demo