切换所有<pre> elements

Question

How do I add a button or link to a page that would hide/show all <script> $(document).ready(function() { function activateTab(index) { switch (index) { case 0: $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: true, slideshow: false, itemWidth: 80, itemMargin: 5, asNavFor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: true, slideshow: false, sync: "#carousel" }); //----------------- $(window).resize(); //----------------- break; case 1: $('#carousel2').flexslider({ animation: "slide", controlNav: false, animationLoop: true, slideshow: false, itemWidth: 80, itemMargin: 5, asNavFor: '#slider2' }); $('#slider2').flexslider({ animation: "slide", controlNav: false, animationLoop: true, slideshow: false, sync: "#carousel2" }); //----------------- $(window).resize(); //----------------- break; } } $('div#Panels').tabs({ active: 0, collapsible: false, activate: function(event, ui) { activateTab(ui.newPanel.index()); } }); activateTab(0); }); </script> elements when clicked? Is there a CSS-only solution, similar to http://cssdeck.com/labs/css-only-showhide? Is it possible to create a drop-in solution so that only a <pre> element needs to be added to the header?

Answer 1

It could be hacked similarly to that CSS example you've shown, but I'm not too sure about cross-browser compatibility...

A simple standalone JS snippet will work though:

Plain JS way:

name$ = Input("What is your name? ")
Print "Hello " + name$
answer = Input("What is 2 and 2? ")

If name$ = "Kyle"
    Print "Kyle is always right."
    WaitKey()
    End
EndIf

If answer = 4
    Print "No, 2 and 2 is 22."
Else
    Print "No, 2 and 2 is 4."
EndIf

WaitKey()
End

document.getElementById('t').addEventListener('click', toggle);

function toggle(){
  var pres = document.querySelectorAll('pre');
  for (var i = 0; i < pres.length; i++) {
    pres[i].style.display = pres[i].style.display == 'none' ? 'block' : 'none';
  }
}

---

The CSS-only way:

<button id="t">Toggle</button>
<pre>pre</pre>
<pre>pre</pre>
<pre>pre</pre>
<pre>pre</pre>
<pre>pre</pre>
<pre>pre</pre>

input[type=checkbox] {display: none}
input[type=checkbox] ~ pre {
  display: block;
}
input[type=checkbox]:checked ~ pre{
    display: none;
}
label {cursor: pointer}
label:hover {font-weight: bold}

@StephenP's way:

<input type="checkbox" id="t" role="button">
<label for="t">toggle</label>     
      
<pre>pre</pre>
<pre>pre</pre>
<pre>pre</pre>

document.getElementById('t').addEventListener('click', toggle);

function toggle(){
  var pres = document.querySelectorAll('pre');
  for (var i = 0; i < pres.length; i++) {
    pres[i].classList.toggle('hidden');
  }
}

.hidden {display: none}

So the idea is that a class (<button id="t">Toggle</button> <pre>pre</pre> <pre>pre</pre> <pre>pre</pre> <pre>pre</pre> <pre>pre</pre> <pre>pre</pre>) is taking care of visibility, and you're no longer directly changing the hidden style of the elements, but just adding/removing the display class.

This is a much better approach for styling elements in 99% cases.

Answer 2

You can do this with this jquery code: raster, added within a click handler for your button. And yes, only a $("pre").toggle() tag is needed in your header, however I'd recommend adding the tag at the end of the body, for html rendering performance improvements.

Alternatively you can use <script> and show() if you want better control of when to hide and when to show.