Collapsibale Sections

[Master]

I want to create collapsible section where when I click on a button I open a section and show another button which shows section is open

[MayMusic]

The actual code is at https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-creating-collapsible-sections/

 

But since you want to show another button when section is open I recommend the code below.

Disable HTML Editor for all HTML Blocks and Header/Footer mentioned below.

In the HEADER paste the code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Section1").hide();
    $("#Section2").hide();
    $("#s1").hide();
    $("#s2").hide();
    
    
$("#d1").click(function(){
$("#Section1").show();
  $("#s1").show();
  $("#d1").hide();
    });
    
    
$("#d2").click(function(){
$("#Section2").show();
$("#s2").show();
  $("#d2").hide();
 
    });
    
    
 $("#s1").click(function(){
$("#Section1").hide();
$("#s1").hide();
  $("#d1").show();
 
    }); 
    
$("#s2").click(function(){
$("#Section2").hide();
$("#s2").hide();
  $("#d2").show();
 
    }); 
    
});
</script>

 

On top of the first section add HTML Block and use the code below:

<img src="URL to hide" id="d1" style="cursor:pointer;">
<img src="URL to show" id="s1" style="cursor:pointer;">
<table id="Section1"><td>

HTML Block after Section one and beginning section 2

</td></table>
<img src="URL to hide" id="d2" style="cursor:pointer;">
<img src="URL to show" id="s2" style="cursor:pointer;">
 
<table id="Section2"><td>

And HTML Block at the end of section 2

</td></table>