DRY vergrössern ibox-Content-Funktion in einer dynamischen

Question

Ive Converting erstellt eine Reihe von Funktionen, die DRY Es war ursprünglich ein Schopf ibox-Gehalt aus beliebiger Spaltengröße auf die maximale Spaltengröße (12) zu erhöhen. Also brauche ich Hilfe, um eine dynamische Funktion zu erstellen, die für alle Schaltflächen funktioniert, die die Vergrößerungsfunktion haben, indem der ibox-Inhalt auf die maximale Spaltengröße erhöht wird, wenn er angeklickt wird und dann wieder auf seine ursprüngliche Spaltengröße zurückgesetzt wird.

JsFiddle

HTML

<div class="row"> 
    <div class="col-lg-6" id="elements"> 
     <div class="ibox float-e-margins" id="elementBox">   
      <div class="ibox-title" tabindex="0"> 
       <button type="button" class="btn btn-xs btn-go-1"> 
        <i class="glyphicon glyphicon-fullscreen"></i> 
       </button> 
      </div> 
      <div class="ibox-content short-box" id="ibox-1"> 
       content 
      </div> 
     </div> 
    </div> 
</div> 

JAVASCRIPT

$(".btn-go-1").click(function() { 
    $("#elements").toggleClass("col-lg-6 col-lg-12", 1000, "linear"); 
    $("#ibox-1").toggleClass("short-box large-box", 1000, "linear"); 
}); 

Answer 1

1. Geben Sie Ihre Container gleichen Klasse, z 012.354..
2. Geben Sie Ihre Tasten gleiche Klasse, z btn-go.

3. data-* Attribut hinzufügen die Standardgröße eines jeden Container zu speichern, z:

   <div data-default='col-xs-6' class="container col-xs-6" id="strageties"> 
   

4. für btn-go ein Klick-Ereignis erstellen:

   $(".btn-go").click(function() { 
       var container = $(this).parents('.container'); 
       var default_size = container.data('default'); 
   
       //Toggle between default size and max size 
       container.toggleClass(default_size+" col-xs-12",1000,"linear"); 
       container.find(".ibox-content").toggleClass("short-box large-box", 1000, "linear"); 
   }); 
   

Hoffnung, das hilft.

$(".btn-go").click(function() { 
 
    var container = $(this).parents('.container'); 
 
    var default_size = container.data('default'); 
 
    
 
    container.toggleClass(default_size+" col-xs-12", 1000, "linear"); 
 
    container.find(".ibox-content").toggleClass("short-box large-box", 1000, "linear"); 
 
});

.container{ 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div data-default='col-xs-6' class="container col-xs-6" id="elements"> 
 
    <div class="ibox float-e-margins">   
 
     <div class="ibox-title" tabindex="0"> 
 
     <button type="button" class="btn btn-xs btn-go"> 
 
      <i class="glyphicon glyphicon-fullscreen"></i> 
 
     </button> 
 
     </div> 
 
     <div class="ibox-content short-box" id="ibox-1"> 
 
     content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div data-default='col-xs-6' class="container col-xs-6" id="strageties"> 
 
    <div class="ibox float-e-margins">   
 
     <div class="ibox-title" tabindex="0"> 
 
     <button type="button" class="btn btn-xs btn-go"> 
 
      <i class="glyphicon glyphicon-fullscreen"></i> 
 
     </button> 
 
     </div> 
 
     <div class="ibox-content short-box" id="ibox-2"> 
 
     content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div data-default='col-xs-8' class="container col-xs-8" id="map"> 
 
    <div class="ibox float-e-margins">   
 
     <div class="ibox-title" tabindex="0"> 
 
     <button type="button" class="btn btn-xs btn-go"> 
 
      <i class="glyphicon glyphicon-fullscreen"></i> 
 
     </button> 
 
     </div> 
 
     <div class="ibox-content short-box" id="ibox-3"> 
 
     content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>