Welcome to collectivesolver - Programming & Software Q&A. A website you can trust. All programs tested and work.

aviboots(AT)netvision.net.il

Instant Grammar Checker - Correct all grammar errors and enhance your writing

You have the vaccine, now let everyone know!
Teach Your Child To Read

BlueHost Web Hosting Black Friday

Bonsai Boy of New York Bonsai Trees and Accessories

DreamCloud The Comfortable Luxury Mattress Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

DreamHost Web Hosting


Disclosure We are a professional Programming & Software Q&A website, that receives compensation from some of the links whose we show you with Information. It means that my content may contain affiliate links.

17,954 questions

24,129 answers

573 users

How to create dynamic (toggle) pills tabs with Bootstrap

1 Answer

0 votes
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Bootstrap Dynamic Pills Tabs</h1>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">PHP</a></li>
    <li><a data-toggle="pill" href="#menu2">JavaScript</a></li>
    <li><a data-toggle="pill" href="#menu3">HTML</a></li>
    <li><a data-toggle="pill" href="#menu4">CSS</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h4>HOME</h4>
      <p>Home text</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h4>PHP</h4>
      <p>PHP is a server-side scripting language designed primarily for web development 
         but also used as a general-purpose programming language.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h4>JavaScript</h4>
      <p>JavaScript is a high-level, dynamic, weakly typed, object-based, 
         multi-paradigm, and interpreted client-side programming language.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h4>HTML</h4>
      <p>Hypertext Markup Language (HTML) is the standard markup language 
         for creating web pages and web applications.</p>
    </div>    
    <div id="menu4" class="tab-pane fade">
      <h4>CSS</h4>
      <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the 
         presentation of a document and most often used to set the visual style of 
         web pages and user interfaces written in HTML</p>
    </div>
  </div>
</div>

</body>
</html>

 




answered Jul 21, 2017 by avibootz
...