如何只顯示幾個切換？

Question

我有這個工作jsfiddle與標記和一些jquery。

這工作正常。但我想用表格完成同樣的事情（切換）。正如你在這個工作小提琴中看到的那樣，它首先只顯示一些信息，但是當你點擊按鈕時，它會顯示更多信息。我怎樣才能用桌子做同樣的事情？

<section class="row-fluid"> 
    <!-- Price example section start --> 
    <div class="innerAreaWithHeading innerAreaBottom padding span8 offset2 toggleContent"> 

     <h2 class="text-center h1">Header</h2> 
     <p class="big"> 
      Text 
     </p> 

     <div class="nsRow innerAreaTop innerAreaBottom border-gray"> 
      <div class="nsSpan6"> 
       <div class="padding"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-pink xl"> 
         Text 
        </p> 
       </div> 

      </div> 
      <div class="nsSpan6"> 
       <div class="bg-gray padding priceBox"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-turquoise xl"> 
         Text 
        </p> 
        <div class="priceTriangleDown"></div> 
       </div> 
      </div> 
     </div> 
     <!-- Toggle hide/show content --> 
     <div class="nsRow innerAreaTop innerAreaBottom border-gray priceExaples" style="display: none;"> 
      <div class="nsSpan6"> 
       <div class="padding"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-pink xl"> 
         Text 
        </p> 
       </div> 

      </div> 
      <div class="nsSpan6"> 
       <div class="bg-gray padding priceBox"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-turquoise xl"> 
         Text 
        </p> 
        <div class="priceTriangleDown"></div> 
       </div> 
      </div> 
     </div> 

     <div class="nsRow innerAreaTop innerAreaBottom border-gray priceExaples" style="display: none;"> 
      <div class="nsSpan6"> 
       <div class="padding"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-pink xl"> 
         Text 
        </p> 
       </div> 

      </div> 
      <div class="nsSpan6"> 
       <div class="bg-gray padding priceBox"> 
        <h3 class="text-center">Header</h3> 
        <p class="price text-center text-turquoise xl"> 
         Text 
        </p> 
        <div class="priceTriangleDown"></div> 
       </div> 
      </div> 
     </div> 
     <!-- End toggle hide/show content --> 
     <div class="row-fluid"> 
      <button data-toggle=".priceExaples" 
       data-togglevisibletext="See more examples" 
       data-togglehiddentext="See less examples" 
       class="btnRounded btnRounded-inverted"> 
       See less examples</button> 
     </div> 
    </div> 
</section> 

$('[data-toggle]').click(function() { 
    var $this = $(this); 
    var toggle = $this.attr("data-toggle"); 
    // Scope triggered area 
    var $context = $(toggle); 

    var attr1 = $(this).attr('data-toggleHiddenText'); 
    var attr2 = $(this).attr('data-toggleVisibleText'); 
    if (typeof attr1 !== typeof undefined && attr1 !== false && 
     typeof attr2 !== typeof undefined && attr2 !== false) { 
     // Toggle text on buttons 
     var txt = $context.is(':visible') ? attr1 : attr2; 
     $this.text(txt); 
    } 

    // Show/hide more content 
    $context.slideToggle('fast'); 

}); 

http://jsfiddle.net/dbtxs5rt/1/

Answer 1

鑑於你的表和意見，你可以實現你想要用的是什麼jQuery的如下：

var tbody = $('tbody'), 
    rows = tbody.children('tr:gt(1)'), 
    button = $('<button>Visa tabell</button>'); 

rows.hide().closest('table').after(button); 

button.click(function() {  
    if (tbody.hasClass('shown')) { 
     rows.fadeOut(function() { 
      tbody.removeClass('shown'); 
      button.text('Visa tabell'); 
     }); 
    } else { 
     rows.fadeIn(function() { 
      tbody.addClass('shown'); 
      button.text('Dölj tabellen'); 
     }); 
    }   
}); 

Example