Bootstrap 4 - Collapse

Descrizione

Il componente Collapse viene utilizzato per mostrare o nascondere il contenuto utilizzando la classe .collapse . Il contenuto può essere compresso aggiungendo l' ancoraggio dell'attributo data-toggle = "collapse" o l'elemento pulsante. L'ID di questi elementi fa riferimento all'ID del contenuto per comprimere i dati.

Comprimi usando Link

Puoi comprimere il contenuto con il tag <a> utilizzando il valore href dell'ID del contenuto da comprimere.

Il seguente esempio lo dimostra:

Esempio

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Collapse with Link</h2>
         <p>
            <a class = "btn btn-info" data-toggle = "collapse" 
               href = "#collapsewithlink" role = "button" aria-expanded = "false" 
               aria-controls = "collapsewithlink">Click Me</a>
         </p>
         
         <div class = "collapse" id = "collapsewithlink">
            <div class = "card card-body">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
               veniam, quis nostrud exercitation.
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Produrrà il seguente risultato:

Produzione

Comprimi usando il pulsante

Puoi comprimere il contenuto con il tag <button> utilizzando l' attributo data-target con il valore dell'ID del contenuto da comprimere.

Il seguente esempio lo dimostra:

Esempio

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Collapse with Button</h2>
         <p>
            <button class = "btn btn-indo" type = "button" data-toggle = "collapse" 
               data-target = "#collapsewithbutton" aria-expanded = "false" 
               aria-controls = "collapsewithbutton">Click Me</button>
         </p>
         
         <div class = "collapse" id = "collapsewithbutton">
            <div class = "card card-body">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
               veniam, quis nostrud exercitation.
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Produrrà il seguente risultato:

Produzione

Fisarmonica

Puoi utilizzare contenuto comprimibile per creare una fisarmonica che viene spesso utilizzata per contenuti come domande frequenti, panoramiche, ecc.

L'esempio seguente specifica una semplice fisarmonica estendendo il componente della carta:

Esempio

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Accordion </h2>
         <div id = "accordion">
            <div class = "card">
               <div class = "card-header">
                  <a class = "card-link" data-toggle = "collapse" href = "#collapseOne">
                     Accordion #1
                  </a>
               </div>
               
               <div id = "collapseOne" class = "collapse show" data-parent = "#accordion">
                  <div class = "card-body">Content for Accordion #1.</div>
               </div>
            </div>
            
            <div class = "card">
               <div class = "card-header">
                  <a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseTwo">
                     Accordion #2
                  </a>
               </div>
               
               <div id = "collapseTwo" class = "collapse" data-parent = "#accordion">
                  <div class = "card-body">Content for Accordion #2.</div>
               </div>
            </div>
            
            <div class = "card">
               <div class = "card-header">
                  <a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseThree">
                     Accordion #3
                  </a>
               </div>
               
               <div id = "collapseThree" class = "collapse" data-parent = "#accordion">
                  <div class = "card-body"> Content for Accordion #3.</div>
               </div>
            </div>
            
         </div>
      </div>
    
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Produrrà il seguente risultato:

Produzione

↰ Previous page

Bootstrap 4 - Collapse

Descrizione

Comprimi usando Link

Esempio

Produzione

Comprimi usando il pulsante

Esempio

Produzione

Fisarmonica

Esempio

Produzione

Tutorial Bootstrap 4

Bootstrap 4 Risorse utili