templates/design40_webpages/common/toggle-buttons-for-wrapper.html

   1 <!--
   2   Include this JS and the HTML toggle buttons right first into a .wrapper container
   3   for minimizing / maximizing the surrounded .wrapper-container
   4   First Symbols: &or; & &lt;
   5 -->
   6 <div class="toggles" id="toggles">
   7   <script type="text/javascript">
   8     var toggles_id = "#toggles" ; // container of the toggle buttons
   9     var wrapper = new Object() ;
  10     $( window ).on( "load", function() {
  11       if( $(toggles_id).parent().attr('class') == "wrapper" ) {
  12         wrapper = $(toggles_id).parent() ; // closest surrounding wrapper to toggle
  13         $(wrapper).addClass("toggled");
  14       }
  15       if( wrapper != "") {
  16         var hi = -1; //height of the wrapper
  17         $(wrapper).ready(function(){
  18           if( hi <= -1 ) hi = $(wrapper).height(); // height of the wrapper
  19
  20         });
  21         // Toggle to minimum
  22         $("#toggler-1").click(function(){
  23           $(wrapper).animate({height:"30px"},200).addClass("bordered");
  24           $(this).toggle();
  25           $("#toggler-2").toggle();
  26         });
  27         // Toggle back to maximum
  28         $("#toggler-2").click(function(){
  29           $(wrapper).animate({height:hi},200).removeClass("bordered");
  30           $(this).toggle();
  31           $("#toggler-1").toggle();
  32         });
  33       }
  34     });
  35   </script>
  36   <a class="symbol toggle min" id="toggler-1" href="#" style="display:visible;"></a>
  37   <a class="symbol toggle max" id="toggler-2" href="#" style="display:none;"></a>
  38
  39 </div><!-- /.toggles /#toggles -->