Path: csiph.com!3.eu.feeder.erje.net!feeder.erje.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 22:48:26 +0200
Organization: PointedEars Software (PES)
Lines: 43
Message-ID: <5257802.DvuYhMxLoT@PointedEars.de>
References: <qde3ou$aqm$1@dont-email.me> <1860328.oMNUckLgyt@PointedEars.de>
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 9ciDm/rllGbiLvm8IPoCtm4Egz9pPo135ssRjMfmmpUUyRtjZbyxi/VgHzicv32LzbB5sKHUC68cg0ybHeEYl4QSFG3S438Q5Nzi4abGYnwSBsVFvRZfvtkCnXc6nxJt
NNTP-Posting-Date: Fri, 7 Jun 2019 20:48:26 +0000 (UTC)
Injection-Info: news.albasani.net; logging-data="DAoTZ3SN6hkvqGgLqpfU8JGRcpG98kfm5h+E0fk+gpGqGhDYSapukJRg1kw4AQcFinmZWA32EC0LsXgI1zL3NzloLu7t+mhDZLE8pSJbdsmZrW7vm8yr6KCsGpIsqHk6"; 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:CA/2L2VYD9Ar9lk18Fl4NIkZiQo=
Xref: csiph.com comp.lang.javascript:36831

Thomas 'PointedEars' Lahn wrote:

> 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; }

Minor mistake: This line should be

    .question .checkbox:checked ~ .answer { display: block; }

to select elements whose “class” attribute contains the class name “answer” 
that are also siblings following the checkbox.
 
> 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>

-- 
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.