5 ms·

I'm interested in seeing these 3 lines of Javascript that can implement an accordion. With a sane limit to number of characters on each line as well.

• Touche 10y ago
  With jQuery it's probably like 4 or 5 lines. With plain JS a few more as you have to write your own iterator function. All an accordion does is add an event listener that removes a class from all elements and adds it back to one of them. Then there's a 1 line transition for that class in css.
  • talmand 10y ago
    Is jQuery included in those 4 or 5 lines? One line of CSS in your accordion?
    • Touche 10y ago
      If you had read the next sentence of my comments you would have seen that it would be a "few more lines" if you didn't use jQuery, basically you need a function like: function eachItem(arrayLike, cb) { return [].slice.call(arrayLike).forEach(cb); } So 3 more lines. If I said you can write a very verbose accordion in under 20 lines would that be good enough for you?
      • talmand 10y ago
        >> So 3 more lines. If I said you can write a very verbose accordion in under 20 lines would that be good enough for you? Since that's more realistic, yes that would do nicely.
        • talmand 10y ago
          Crap, can't edit. Two others completed the accordion in 3 lines task without jQuery.
    • justinlardinois 10y ago
      I'm not sure why the actual jQuery library matters here. Chances are if you're using jQuery for an accordion you're also using it for a lot of other things.
• nommm-nommm 10y ago
  If one is already using jQuery - https://jsfiddle.net/jw75xznb/ https://jsfiddle.net/jw75xznb/ Yeah, it's incredibly crude but it is 3 lines and it took approximately 60 seconds.
  • talmand 10y ago
    If it involves jQuery then it is not 3 lines. The original claim was 3 lines of Javascript. Making a claim something is only 3 lines of Javascript without including the fact that jQuery is required is a disservice to the many people that made jQuery the wonderful library that it is. That is the source of my disagreement.
    • dwaltrip 10y ago
      That isn't a disservice to jquery. The fact that people don't explicitly mention it could actually be viewed as a demonstration of its ubiquity.
      • talmand 10y ago
        No, it's people becoming not being able to know the difference between jQuery and Javascript. Calling either of them the other is a disservice to both.
        • nommm-nommm 10y ago
          I'm old. I wrote many, many, many lines of JavaScript before jQuery ever existed, I know the difference very well. Nobody is confused. Ignoring the fact that it clearly wasn't intended to be taken literally, "in 3 lines of JS" when speaking in the context of a team effort on a web application can be understood as "adding 3 additional lines to the source code." Context. There's no need to be nasty and argumentative for no reason.
    • nommm-nommm 10y ago
      You're being disingenuous. Firstly, "3 lines of Javascript" wasn't meant to be taken literally. Not only that but 73% of the top 100,000 websites use jQuery - if you are on a large web development project you are more likely than not using jQuery. [1] http://trends.builtwith.com/javascript/jQuery http://trends.builtwith.com/javascript/jQuery
• gabemart 10y ago
  https://jsfiddle.net/e77f4hhz/ https://jsfiddle.net/e77f4hhz/
  • talmand 10y ago
    Ah, someone else answered the call instead of trying to insult my intelligence. Thank you.
    • nommm-nommm 10y ago
      Nobody is insulting your intelligence.
• jonahx 10y ago
  Here you go: http://jsbin.com/codedujeqe/edit?js,output http://jsbin.com/codedujeqe/edit?js,output JS: var panels = [...document.querySelectorAll(".accordion li")]; panels.forEach(x => x.addEventListener('click', e => panels.forEach(y => y.setAttribute('class', y == e.target && !y.classList.contains('open') ? 'open' : '')) ));
  • epidemian 10y ago
    Minor nitpick: if you're using classList, you might as well also use it to toggle the "open" class (instead of y.setAttribute('class', ...)): y.classList.toggle('open', y == e.target && !y.classList.contains('open')) As the behavior of what to do with the "open" class is only dependent on whether `y` is the clicked element, i find this version more readable: y == e.target ? y.classList.toggle('open') : y.classList.remove('open')) Aaaand, it can be made less readable again by selecting the classList method to call conditionally :) y.classList[y == e.target ? 'toggle' : 'remove']('open')
    • jonahx 10y ago
      Nice. Wasn't aware of the classList.toggle method.
  • talmand 10y ago
    Thank you, exactly what I was hoping to see instead of the usual arguments that don't actually fulfill the request.