CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dave
Dave

Reputation: 786

Make "Counter Increment" hidden onclick?

Is it possible to make a counter-increment not visible and being able to toggle on and off the counter-increment property? For example, please see the attached code. Thank you!

Fiddle

body{
    counter-reset:chapter;
}

h2{
    counter-reset:topic;
}

h2:before{
    counter-increment:chapter;
    content:counter(chapter) ". ";
}

h4:before {
    counter-increment:topic;
    content:counter(chapter) "." counter(topic) " ";
}
<button>
Toggle On/Off Counter Increment Property
</button>

<h2>Paragraph</h2>
<h4>
   Sentence
</h4>
<h4>
    Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
  Sentence
</h4>

Upvotes: 0

Views: 297

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

Basicly ou can reset the :before rules :

button:focus ~ :before {content:'';/* erase counter */}
button:focus {pointer-events:none; /* to toggle focus */}

Basic snippet CSS example to show the idea (or fiddle https://jsfiddle.net/Lcbdxhk5/1/ + toggle: https://jsfiddle.net/Lcbdxhk5/3/ ):

body {
  counter-reset: chapter;
}

h2 {
  counter-reset: topic;
}

h2:before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
}

h4:before {
  counter-increment: topic;
  content: counter(chapter) "." counter(topic) " ";
}

button:focus ~:before {
  content: '';
}
button:focus {pointer-events:none; /* to toggle focus */}
<button>
  Toggle On/Off Counter Increment Property
</button>

<h2>Paragraph</h2>
<h4>
   Sentence
</h4>
<h4>
    Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
  Sentence
</h4>

Via js/jQuery, just use the toggle() jQuery fonction adding/removing a class

Upvotes: 1

Related Questions