Path: csiph.com!weretis.net!feeder7.news.weretis.net!news.albasani.net!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Getting the index of a clicked element
Date: Fri, 07 Jun 2019 20:16:07 +0200
Organization: PointedEars Software (PES)
Lines: 77
Message-ID: <1860328.oMNUckLgyt@PointedEars.de>
References: <qde3ou$aqm$1@dont-email.me>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: news.albasani.net iqQUpIzrZuud6QbiqXKg3GzbFiooxmjSAseE7BwoWkd8WOAVm2QuhCZGOpuuckUZiDU4s0nT1PI/J25XMWS7j2l4Fo+I3qcL247QUWHrWD+YGBTYyVa9bcJyvmk8lKZe
NNTP-Posting-Date: Fri, 7 Jun 2019 18:16:08 +0000 (UTC)
Injection-Info: news.albasani.net; logging-data="AuVyz8/0CRbrrsPjF3vPitMaAx/5j/PHxi5H1dUBMyJVtVfAelA+tKJ5AvX3crDUKGDv/35HBEnr1DFGWKDmsFesW/XEL8bQ+sWHfCYKG25TIv1RZxNZC81zRplHQeYQ"; mail-complaints-to="abuse@albasani.net"
User-Agent: KNode/4.14.10
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Cancel-Lock: sha1:6F2nsf85SEALtyJdW1zKJPLe3n4=
Xref: csiph.com comp.lang.javascript:36826

James Harris wrote:

> Almost a complete beginner at JavaScript so there may be a better way to
> do this but ... what I am trying to do is have a web page consisting of
> pairs of questions and answers as in
> 
>    Question
>      Answer
>    Question
>      Answer
>    Question
>      Answer
> 
> where clicking on the question toggles whether the answer appears or
> not. Answers will initially be absent.

You should probably read about “event bubbling”.  The event listener should 
have the following general form:

  var listener = function (event) {
    const classList = event.target.classList;

    if (classList.contains('js-question'))
    {
      if (classList.contains('shown'))
      {
        classList.remove('shown');
      }
      else
      {
        classList.add('shown');
      }
    }
  };

Then you do the showing and hiding with CSS rules based on those CSS 
classes.

But there is no scripting needed for this in modern graphical browsers (and 
text browser users want to see everything at a glance):

HTML:

  <div class="question">
    <label for="checkbox-foo">question</label>
    <input type="checkbox" class="checkbox" id="checkbox-foo">
    <div class="answer">
      answer
    </div>
  </div>

CSS:

  /* or whatever style you like */
  .question .checkbox { visibility: hidden; }
  
  .question .checkbox:not(:checked) ~ .answer { display: none; }
  .question .checkbox:checked .answer { display: block; }

Using the :not(:checked) pseudo-class explicitly prevents the answer from 
being hidden if the :checked pseudo-class is not supported.

This approach can be used for all kinds of interactive widgets, e. g. tree 
widgets too.

<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors>

If you can target HTML5 users only, then you can also use the “details” 
element, in which case CSS is optional:

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details>
  
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.