Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36826

Re: Getting the index of a clicked element

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:35 +0100
  Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:59 +0100
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:33 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 01:43 -0700
  Re: Getting the index of a clicked element "R.Wieser" <address@not.available> - 2019-06-07 19:39 +0200
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:52 +0100
  Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-07 10:45 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:57 +0100
      Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-09 05:44 -0700
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:16 +0200
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 22:48 +0200
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:36 +0200
  Re: Getting the index of a clicked element JJ <jj4public@vfemail.net> - 2019-06-08 12:57 +0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 10:30 +0100
      Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 12:13 +0200
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:35 +0100
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:45 +0100
        Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:03 +0100
          Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 21:11 +0200
            Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 14:18 -0700
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 02:16 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:14 +0100
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-10 11:29 -0700
    Re: Getting the index of a clicked element "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-10 23:00 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-11 03:22 -0700

csiph-web