3

The assignment I'm working on asks to create a dropdown menu such as the one in the link. How would i do this?

enter image description here

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Vincent Lee
  • 29
  • 2

2 Answers2

5

You could use details and summary HTML5 elements (if IE and Opera Mini are not a big concern; for those the below example will fallback gracefully)

<details>
  <summary>Please fill out our optional survey</summary>
  <p>What year are you in college?</p>
  <label><input type="radio" name="clg" value="0"> Not yet there</label>
  <label><input type="radio" name="clg" value="1"> Junior</label>
  <label><input type="radio" name="clg" value="2"> Senior</label>
</details>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
http://html5doctor.com/the-details-and-summary-elements/

Find also other ways to Toggle an element

To recreate the above in JavaScript here's a ES6 example:

[...document.querySelectorAll('[data-details]')].forEach( el => 
  el.addEventListener('click', () => {
    document.querySelector(el.getAttribute('data-details')).classList.toggle('hide');
    el.classList.toggle('open');
    el.setAttribute('aria-expanded', el.classList.contains('open'));
  })
);
[data-details] {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
}
[data-details]:before      { content: "\25ba"; speak: none; }
[data-details].open:before { content: "\25bc"; speak: none; } 

.hide{ display: none; }
<button type="button" data-details="#d1" aria-describedby="d1" aria-expanded="false" >Summary 1</button>
<div id="d1" class="hide">CONTENT ONE</div>

<button type="button" data-details="#d2" aria-describedby="d2" aria-expanded="false">Summary 2</button>
<div id="d2" class="hide">CONTENT TWO</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Note that these tags are very poorly supported. – Ben Jan 31 '18 at 00:54
  • @Ben Yes. but by providing such answers we can only push vendors to finally implement those new and popular features - meanwhile it fallbacks really gracefully. – Roko C. Buljan Jan 31 '18 at 00:55
  • Yes, but Javascript is supported by all browsers, there are *relatively* few issues with compatibility, and it is much more customizable than this built in option. – Ben Jan 31 '18 at 00:59
  • 1
    The current level of support appears to be pretty good except for IE and Opera mini: https://caniuse.com/#search=summary – Jason Aller Jan 31 '18 at 01:07
0

As another answer pointed out, you can use the details and summary elements, but they are poorly supported, only usable in Chrome and Firefox, if you need a solution that works in IE, Edge, and Safari, you need to use javascript, thankfully, this is very simple.

<div id="summary" onclick="toggle();">Summary</div>
<div id="togglable" style="display:none;">Toggleable text</div>

<script>
    var i=0;//Counter
    function toggle(){//Function called when Summary is clicked
        if(i%2===0){//Even number
            document.getElementById("toggle").style.display="initial";//Make it visible
        }else{//Odd number
            document.getElementById("toggle").style.display="none";//Visible
        }
        i++;
        if(i===2){
            i=0;//Reset i to ensure it doesn't get too big
        }
    }
</script>
Ben
  • 2,200
  • 20
  • 30
  • Polluting window scope is a bad idea. A reusable function would be much better by using `addEventListener` and using `data-*` attribute with a target selector. Also using inline JS is considered bad practice. – Roko C. Buljan Jan 31 '18 at 01:07
  • Also instead of doing stuff like `if(i%2===0)`, `i++` and `if(i===2){ i=0; }` all you need is `if(++i%2)` or even 1 line instead of 9: `el.style.display = ++i%2 ? "initial" : "none";`but I'd rather go for the computed style property instead of using a global `i`... – Roko C. Buljan Jan 31 '18 at 01:10
  • @RokoC.Buljan given that OP likely has very limited Javascript understanding, I decided to allow him an option that is very easy to copy-paste without knowing what it does. Does it represent my best javascript abilities, obviously not, it is meant only to be simple. – Ben Jan 31 '18 at 01:10
  • @RokoC.Buljan While my code can be simplified, there really isn't any need, preincrementing and ternary operators only serve to add complexity to the solution, this is about intuitiveness for a beginner, not for a oneline-wonder – Ben Jan 31 '18 at 01:12