Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
playground:fpga_resourcecenter:collapsiblepanels [2017/02/01 21:07] – created James Colvinplayground:fpga_resourcecenter:collapsiblepanels [2022/10/04 11:38] (current) – external edit 127.0.0.1
Line 1: Line 1:
-===== Bootstrap collapse =====+===== Bootstrap collapse and outliner=====
  
-These are examples of using default bootstrap html css and js collapse. The only modification from the bootstrap documentation is that panel headings can't use <a> tags. +===== Outliner ===== 
 +This is the far more superior outliner code since you could actually memorize how to do it. 
 + 
 +--> Section 1 without preview thanks to the pound sign# 
 + 
 +  * List item one in Section 1 without number 
 +  - Item number 1 
 +  - Item number 2 
 +  - Item number 3 
 + 
 +Some other syntax. even **//__Wiki__//** ''syntax'' 
 + 
 +--> Nested section opened by default with the carrot sign and a tooltip preview without the pound sign^ 
 + 
 +I'm a tooltip and the content! And obnoxious as a tooltip! 
 + 
 +--> Nested nested content?# 
 + 
 +That would be super awesome if this works\\ horray it does!\\ you'll notice that adding the close out code <-- does nothing if it's not at the start of a new line 
 + 
 +<-- close nested nested content comment 
 +outside of nested nested content 
 + 
 +<--close nested content in section 1 comment 
 +Continue section 1 outside of nested content?  
 + 
 +<-- A COMMENT TO CLOSE OUT SECTION 1 THAT IS INVISIBLE!!!! YESSSSSS!!!!!! 
 +Outside of section 1 before section 2. There's an invisible comment closing out section 1 
 + 
 +--> You know you want to try out a section 2!# 
 +Okay, so it's not a real section 2 that auto numbers. I just made the title look like it did that.\\ Otherwise 
 +section 2 is quite beautiful wouldn't you say? I can even put a table inside it 
 +^ A beautiful table ^^^ 
 +^Left Header  ^  Center Header  ^  Right Header| 
 +|  content 1  |      Content 2  |   Content 3  | 
 +| content 1a  | :::             |  content 3a  | 
 +make sure you have some sort of line between a table and the close out ''<''''-''''-'' code\\ otherwise it apparently breaks the code 
 +<-- close out section 2 
 + 
 +outside of all of the sections 
 + 
 + 
 +\\ \\  
 +start up a new sectional outliner thing after using a couple of ''\\'' newline codes 
 +--> A brand new section 1 that starts out opened, but no preview#^ 
 +some cool internal content to the new section 1 
 +<-- 
 + 
 + 
 +===== Bootstrap Collapse ===== 
 + 
 + 
 +These are examples of using default bootstrap html css and js collapse. The only modification from the bootstrap documentation is that panel headings can't use <a> tags and it looks super gross in the editor.
  
 <html> <html>
Line 8: Line 60:
     <div class="panel-heading" role="tab" id="headingOne">     <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">       <h4 class="panel-title role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-          Collapsible Group Item #1+          Collapsible Group Item #1 title
       </h4>       </h4>
     </div>     </div>
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
       <div class="panel-body">       <div class="panel-body">
-        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.+        collapsible box 1 that has the class="panel-collapse collapse in" with the "in" causing this box to be open by default
       </div>       </div>
     </div>     </div>
Line 25: Line 77:
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
       <div class="panel-body">       <div class="panel-body">
-        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.+        collapsible box 2
       </div>       </div>
     </div>     </div>
Line 36: Line 88:
     </div>     </div>
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-      <div class="panel-body"></html> +      <div class="panel-body"> 
-Wiki syntax within HTML wrapper. End the **HMTL**, start wiki syntax, then finish your __//HTML//__. +      </html>Wiki syntax within HTML wrapper. End the **HMTL**, start wiki syntax, then finish your __//HTML//__.<html> 
-<html></div>+      </div>
     </div>     </div>
   </div>   </div>