accordion for developer examples page

_data/devdocs/en/examples/p2p_networking.md

@@ -4,7 +4,14 @@ http://opensource.org/licenses/MIT.
 {% endcomment %}
 {% assign filename="_data/devdocs/en/examples/p2p_networking.md" %}
 
+<div class="accordion-toggle" markdown="block">
+
 ## P2P Network
+
+</div>
+
+<div class="accordion-content" markdown="block">
+
 {% include helpers/subhead-links.md %}
 
 ### Creating A Bloom Filter
@@ -454,3 +461,4 @@ is identical to the merkle root in the header and check the other steps
 of the parsing checklist in the `merkleblock` message section.
 
 {% endautocrossref %}
+</div>

_data/devdocs/en/examples/payment_processing.md

@@ -4,7 +4,14 @@ http://opensource.org/licenses/MIT.
 {% endcomment %}
 {% assign filename="_data/devdocs/en/examples/payment_processing.md" %}
 
+<div class="accordion-toggle" markdown="block">
+
 ## Payment Processing
+
+</div>
+
+<div class="accordion-content" markdown="block">
+
 {% include helpers/subhead-links.md %}
 
 ### Payment Protocol
@@ -471,3 +478,4 @@ created by the program above appears in the GUI from Bitcoin Core 0.9.
 ![Bitcoin Core Showing Validated Payment Request](/img/dev/en-btcc-payment-request.png)
 
 {% endautocrossref %}
+</div>

_data/devdocs/en/examples/testing.md

@@ -4,7 +4,12 @@ http://opensource.org/licenses/MIT.
 {% endcomment %}
 {% assign filename="_data/devdocs/en/examples/testing.md" %}
 
+<div class="accordion-toggle" markdown="block">
+
 ## Testing Applications
+
+</div>
+<div class="accordion-content" markdown="block">
 {% include helpers/subhead-links.md %}
 
 {% autocrossref %}
@@ -103,3 +108,4 @@ configuration directory locations on various operating systems. Always back up
 mainnet wallets before performing dangerous operations such as deleting.)
 
 {% endautocrossref %}
+</div>

_data/devdocs/en/examples/transactions.md

@@ -4,7 +4,13 @@ http://opensource.org/licenses/MIT.
 {% endcomment %}
 {% assign filename="_data/devdocs/en/examples/transactions.md" %}
 
+<div class="accordion-toggle" markdown="block">
+
 ## Transactions
+
+</div>
+
+<div class="accordion-content" markdown="block">
 {% include helpers/subhead-links.md %}
 
 ### Transaction Tutorial
@@ -1277,3 +1283,4 @@ We send the transaction spending the P2SH multisig output to the local
 node, which accepts it.
 
 {% endautocrossref %}
+</div>

_layouts/devdoc-category.md

@@ -8,6 +8,7 @@ end_of_page: |
   <script src="/js/jquery/jquery-ui.min.js"></script>
   <script src="/js/devsearch.js"></script>
   <script>updateToc();</script>
+  <script>accordion();</script>
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

_sass/screen.scss

@@ -1201,12 +1201,26 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
     margin-bottom: 0;
 }
 .toccontent h2{
+    position: relative;
     margin-top: 40px;
     font-size: 162.5%;
     color: #FF7E00;
     font-weight: 400;
     line-height: 65px;
 }
+.toccontent h2::after{
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 40px;
+    width: 10px;
+    height: 6px;
+    background: url(../img/icons/ico_angle.svg) no-repeat;
+    transform: translateY(-50%);
+}
+.toccontent .active h2::after {
+    transform: translateY(-50%) rotate(180deg);
+}
 .toccontent h3{
     margin-top: 20px;
     font-size: 137.5%;
@@ -1287,7 +1301,12 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
     font-weight:normal;
     border-bottom: 3px double #ddd;
 }
-
+.accordion-toggle {
+    cursor: pointer;
+}
+.accordion-content {
+    display: none;
+}
 .anchorAf{
     position:relative;
 }

js/main.js

@@ -558,3 +558,18 @@ function toggleDonationBanner() {
     toggle.toggleClass('active');
     banner.toggleClass('expanded');
 }
+
+function accordion() {
+  $(document).ready(function($) {
+    $('.accordion-toggle').click(function(){
+
+      //Expand or collapse this panel
+      $(this).next().slideToggle('fast');
+      $(this).toggleClass("active");
+
+      //Hide the other panels
+      $(".accordion-content").not($(this).next()).slideUp("fast");
+      $(".accordion-content").not($(this)).removeClass("active");
+    });
+  }); 
+}