templates/design40_webpages/generic/toggle_wrapper.html

   1 [% USE T8 %]
   2 [%
   3   # Include this JS and these HTML toggle buttons right on the first position of a .wrapper container
   4   # for minimizing / maximizing the surrounding .wrapper container
   5   # First Symbols: former &or; & &lt; but now with icons
   6   # It seems advantageous to give an id to the .wrapper-block e.g. #wrapper-1 or #wrapper-basic-data
   7
   8   # PENDENT: vielleicht noch generischer programmieren.
   9 %]
  10
  11 <div class="toggles" id="toggles">
  12   <script type="text/javascript">
  13     var toggles_id = "#toggles" ; // surrounding container of the toggle buttons
  14     var wrapper = new Object() ;
  15     $( window ).on( "load", function() {
  16       if( $(toggles_id).parent().attr('class') == "wrapper" ) {
  17         wrapper = $(toggles_id).parent() ; // closest surrounding wrapper to toggle, must have the class .wrapper
  18         $(wrapper).addClass("toggled") ; // change the wrapper into a inline-block instead of a 100%-width-block
  19       }
  20       if( wrapper != "") {
  21         var hi = -1; //height of the wrapper
  22         $(wrapper).ready(function(){
  23           if( hi <= -1 ) hi = $(wrapper).height(); // height of the wrapper
  24         });
  25         // Toggle to minimum
  26         $("#toggler-1").click(function(){
  27           $(wrapper).animate({height:"30px"},200).addClass("bordered");
  28           $(this).toggle();
  29           $("#toggler-2").toggle();
  30         });
  31         // Toggle back to maximum
  32         $("#toggler-2").click(function(){
  33           $(wrapper).animate({height:hi},200).removeClass("bordered");
  34           $(this).toggle();
  35           $("#toggler-1").toggle();
  36         });
  37       }
  38     });
  39   </script>
  40   <a class="toggle min" id="toggler-1" href="#" style="display:visible;" title="[% 'Minimize Panel' | $T8 %]"></a>
  41   <a class="toggle max" id="toggler-2" href="#" style="display:none;" title="[% 'Open Panel' | $T8 %]"></a>
  42
  43 </div><!-- /.toggles /#toggles -->