toggle checkbox under ::affter

Question

How will I find the toggle button value "hide" or "show" ?

Go to URL : https://en.wikipedia.org/wiki/Castle the text next to Content is hide or show toggle How to find text "Show" or "Hide" Inspect element for the toggle code is mentioned below Steps:

Go to URL : https://en.wikipedia.org/wiki/Castle
the text next to Content table is hide or show toggle
How to find text "Show" or "Hide"
Inspect element for the toggle code is mentioned above

<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading">
<input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none">
<div class="toctitle" lang="en" dir="ltr">
   <h2 id="mw-toc-heading">Contents</h2>
   <span class="toctogglespan">
   ::before
   <label class="toctogglelabel" for="toctogglecheckbox">
   ::after
   </label>
   </span>
</div>

What do you mean by _"find text"_? The text is set via [CSS content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) — Phil, Aug 09 '21 at 00:16
Thanks for reply. In my script need to check When it shows Hide , the content is hidden. Where will in the html I find the text 'hide' ? Also, I am new to ::after and ::before. Can you please help me understand what does ::after and ::before do ? — Apeksha Mehta, Aug 09 '21 at 01:17
Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Don't Panic, Aug 09 '21 at 07:20

score 0 · Accepted Answer · answered Aug 09 '21 at 04:17

Maybe you need something like this

$(document).ready(function(){
    $('#togglecontent').on('click', function(){
        $("#contents").toggle('hide');
        $(this).text(function(i, text){
          return text === "hide" ? "show" : "hide";
      })      
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <label>Contents</label>
   [<a href="#" id="togglecontent">hide</a>]
</div>
<div id="contents">
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Definition"><span class="tocnumber">1</span> <span class="toctext">Definition</span></a>
<ul>
<li class="toclevel-2 tocsection-2"><a href="#Etymology"><span class="tocnumber">1.1</span> <span class="toctext">Etymology</span></a></li>
<li class="toclevel-2 tocsection-3"><a href="#Defining_characteristics"><span class="tocnumber">1.2</span> <span class="toctext">Defining characteristics</span></a></li>
<li class="toclevel-2 tocsection-4"><a href="#Terminology"><span class="tocnumber">1.3</span> <span class="toctext">Terminology</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-5"><a href="#Common_features"><span class="tocnumber">2</span> <span class="toctext">Common features</span></a>
<ul>
<li class="toclevel-2 tocsection-6"><a href="#Motte"><span class="tocnumber">2.1</span> <span class="toctext">Motte</span></a></li>
<li class="toclevel-2 tocsection-7"><a href="#Bailey_and_enceinte"><span class="tocnumber">2.2</span> <span class="toctext">Bailey and enceinte</span></a></li>
<li class="toclevel-2 tocsection-8"><a href="#Keep"><span class="tocnumber">2.3</span> <span class="toctext">Keep</span></a></li>
<li class="toclevel-2 tocsection-9"><a href="#Curtain_wall"><span class="tocnumber">2.4</span> <span class="toctext">Curtain wall</span></a></li>
<li class="toclevel-2 tocsection-10"><a href="#Gatehouse"><span class="tocnumber">2.5</span> <span class="toctext">Gatehouse</span></a></li>
<li class="toclevel-2 tocsection-11"><a href="#Moat"><span class="tocnumber">2.6</span> <span class="toctext">Moat</span></a></li>
<li class="toclevel-2 tocsection-12"><a href="#Battlements"><span class="tocnumber">2.7</span> <span class="toctext">Battlements</span></a></li>
<li class="toclevel-2 tocsection-13"><a href="#Arrowslits"><span class="tocnumber">2.8</span> <span class="toctext">Arrowslits</span></a></li>
<li class="toclevel-2 tocsection-14"><a href="#Postern"><span class="tocnumber">2.9</span> <span class="toctext">Postern</span></a></li>
<li class="toclevel-2 tocsection-15"><a href="#Great_hall"><span class="tocnumber">2.10</span> <span class="toctext">Great hall</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-16"><a href="#History"><span class="tocnumber">3</span> <span class="toctext">History</span></a>
<ul>
<li class="toclevel-2 tocsection-17"><a href="#Antecedents"><span class="tocnumber">3.1</span> <span class="toctext">Antecedents</span></a></li>
<li class="toclevel-2 tocsection-18"><a href="#Origins_(9th_and_10th_centuries)"><span class="tocnumber">3.2</span> <span class="toctext">Origins (9th and 10th centuries)</span></a></li>
<li class="toclevel-2 tocsection-19"><a href="#11th_century"><span class="tocnumber">3.3</span> <span class="toctext">11th century</span></a></li>
<li class="toclevel-2 tocsection-20"><a href="#Innovation_and_scientific_design_(12th_century)"><span class="tocnumber">3.4</span> <span class="toctext">Innovation and scientific design (12th century)</span></a></li>
<li class="toclevel-2 tocsection-21"><a href="#13th_to_15th_centuries"><span class="tocnumber">3.5</span> <span class="toctext">13th to 15th centuries</span></a></li>
<li class="toclevel-2 tocsection-22"><a href="#Advent_of_gunpowder"><span class="tocnumber">3.6</span> <span class="toctext">Advent of gunpowder</span></a></li>
<li class="toclevel-2 tocsection-23"><a href="#Bastions_and_star_forts_(16th_century)"><span class="tocnumber">3.7</span> <span class="toctext">Bastions and star forts (16th century)</span></a></li>
<li class="toclevel-2 tocsection-24"><a href="#Later_use_and_revival_castles"><span class="tocnumber">3.8</span> <span class="toctext">Later use and revival castles</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-25"><a href="#Construction"><span class="tocnumber">4</span> <span class="toctext">Construction</span></a></li>
<li class="toclevel-1 tocsection-26"><a href="#Social_centre"><span class="tocnumber">5</span> <span class="toctext">Social centre</span></a></li>
<li class="toclevel-1 tocsection-27"><a href="#Locations_and_landscapes"><span class="tocnumber">6</span> <span class="toctext">Locations and landscapes</span></a></li>
<li class="toclevel-1 tocsection-28"><a href="#Warfare"><span class="tocnumber">7</span> <span class="toctext">Warfare</span></a></li>
<li class="toclevel-1 tocsection-29"><a href="#See_also"><span class="tocnumber">8</span> <span class="toctext">See also</span></a></li>
<li class="toclevel-1 tocsection-30"><a href="#References"><span class="tocnumber">9</span> <span class="toctext">References</span></a>
<ul>
<li class="toclevel-2 tocsection-31"><a href="#Notes"><span class="tocnumber">9.1</span> <span class="toctext">Notes</span></a></li>
<li class="toclevel-2 tocsection-32"><a href="#Bibliography"><span class="tocnumber">9.2</span> <span class="toctext">Bibliography</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-33"><a href="#Further_reading"><span class="tocnumber">10</span> <span class="toctext">Further reading</span></a></li>
</ul>
</div>

Demo jsfiddle : https://jsfiddle.net/kdhtms3b/2/

toggle checkbox under ::affter

1 Answers1