How to show/hide a drop-down by clicking on it?

Question

I'm creating a drop-down element with only one option below. I stuck when I need to show/hide this option.

HTML:

<div id="div1">
    <i class="fa fa-plus-square" title="Some title" type="button">
    <span id="spanId" title="Some other title">Some text</span>
</div>

<i> -is the image drop-down button.

CSS:

#div1 {
    cursor: pointer;
    /*styles, which are not related to the issue*/
}
#spanId {
    display: none;
    /*some other styles*/
}
#spanId :hover {
    background: #e7edf4;
}

So, the span is hidden. I can show it, but after that it is remaining visible for ever and I`m not able to hide it.

JS/JQuery:

let visible = false
const toggleButton = $('#div1')
const dropDownBtn = $('#spanId')
const someOtherButton = $('#someId')

toggleButton.click(() => {
    dropDownBtn.css("display", "block")
    visible = true
})

if(visible == true){
    $(document).click(() => {
       dropDownBtn.css("display", "none")
       visible = false
    })
}

dropDownBtn.click(() => {
    someOtherButton.click()
})

Also I tried to do it with <select> , bu did not succeed. Also try show() & hide() methods of jQuery. I really can`t realize where am I wrong.

Also, unrelated. [Do you recommend using semicolons after every statement in JavaScript?](https://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript) — Taplar, Jun 14 '19 at 13:17
Also, the logic in the `if(visible == true)` is never going to happen, as visible is false on page load, and only changes to true once a click event happens. Which is well past the point that conditional runs — Taplar, Jun 14 '19 at 13:21

connexo · Answer 1 · 2019-06-14T14:55:07.537

Simply toggle a class:

div1.addEventListener('click', () => spanId.classList.toggle('visible'))
document.addEventListener('click', (e) => {
  if (!div1.contains(e.target)) spanId.classList.remove('visible')
})

#spanId { display: none; }
#spanId.visible { display: block; }

<div id="div1">
    <i class="fa fa-plus-square" title="Some title">ICON HERE</i>
    <span id="spanId" title="Some other title">Some text</span>
</div>

Also your code had errors. The <i> was not closed properly, and i does not have a type attribute. The Javascript logical error you made was already mentioned in your comments.

Or, if you insist on jQuery:

$(div1).on('click', () => $(spanId).toggleClass('visible'))

#spanId {
  display: none;
}

#spanId.visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <i class="fa fa-plus-square" title="Some title">ICON HERE</i>
  <span id="spanId" title="Some other title">Some text</span>
</div>

Maybe you can advise how to drop-up the span, clicking outside the toggle button? Like this: `$(document).click(() => {}` — Tireless Coder, Jun 14 '19 at 14:06

How to show/hide a drop-down by clicking on it?

1 Answers1