File
Login or Register via GitHub
<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body><h1 class="Title" title="1964/1/20: Session 17">Heading</h1><p>In the example below, multiple people are conversing and one individual is also taking notes.</p><div class="Robert2"> <p>Robert writes some notes about the scene.</p> <p>Robert writes another paragraph of notes. Both Paragraphs are in one <span style="font-family: Consolas; font-style: normal; background-color: lightblue"><div></span> in this example.</p></div><p class="Jane">Jane has a conversation with Seth.</p><p class="Robert">Robert has a conversation with Seth.</p><p class="Robert2">Robert writes some more notes.</p><div class="Seth"> <p>Seth makes a statement.</p> <p>Seth makes another statement. Both Paragraphs are in one <span style="font-family: Consolas; font-style: normal; background-color: lightblue"><div></span> in this example.</p></div><p class="Robert2">Robert writes some more notes and its annoying so I want to create one button (or text object) to hide ALL of his Comments!</p><p><strong>The problem is, All the Java/JQueries I tried will only work on the one occurance it finds and I DO NOT want to use a unique identifyer for each occurance. There are thousands!<br />I simply want to Toggle (Show/Hide) the</strong><span style="font-family: Consolas; font-style: normal; background-color: lightblue">class="Robert2"</span><strong> on the whole page with a button or text object.</strong><br /><strong>One Toggle Button with multiple targets possesing one</strong><span style="font-family: Consolas; font-style: normal; background-color: lightblue">id=""</span> <strong>or</strong><span style="font-family: Consolas; font-style: normal; background-color: lightblue">class=""</span> <br /><strong><u>In other words, I want to make Roberts Notes go away with a click!</u></strong></p><hr /><p>I tried a CSS Only solution and it only works on the div it is in.<br />Can you help me figure a way to do this?</p></body></html>
Output
300px
300px
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers