Bootstrap Snippet amir ACCORFION I MENU Jumbotron Component using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    
  <h2 class="text-center">Bootstrap v4 · Layout Content Components Utilities · Examples</h2>
      
      
  <div class="pos-f-t">
    <nav class="navbar navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <span class="navbar-text pl-3"><em><-- Navbar Component with Collapsed content toggleable via the navbar brand</em></span>
    </nav>
    <div class="collapse" id="navbarToggleExternalContent">
      <div class="bg-dark p-4">
        <div class="jumbotron">
          <h1 class="display-4"><em>Jumbotron Component</em></h1>
          <p class="lead">There are links on this page on GitHub and Blogspot.</p>
          <hr class="my-4">
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            Press <strong>button</strong> below to show links in Modal window.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">×</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(".btn_card").on("click", function() {
    var card = "#" + $(this).attr("id") + "_card";
    if ($(this).hasClass("active")) {
        $(card).hide();
        $(this).text($(this).attr("name") + "OFF");
    } else {
        $(card).show();
        $(this).text($(this).attr("name") + "ON");
    }
    $(this).button('toggle');
    if ($(this).attr("data-toggle") == "popover") {
        $(this).popover('toggle');
    }
})
$(".card1_radio").on("click", function() {
    var card_body = "#btn_card1_card";
    $(card_body).removeClass("text-left text-center text-right");
    switch ($(this).attr("id")) {
        case "card1_radio1": $(card_body).toggleClass("text-left"); break;
        case "card1_radio2": $(card_body).toggleClass("text-center"); break;
        case "card1_radio3": $(card_body).toggleClass("text-right"); break;
    }
})
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
$(function () {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"amir ACCORFION I MENU Jumbotron Component"
Bootstrap 4.1.1 Snippet by zaradi

Related: See More

Questions / Comments:

"amir ACCORFION I MENU Jumbotron Component" Bootstrap 4.1.1 Snippet by zaradi

Related: See More

Questions / Comments:

"amir ACCORFION I MENU Jumbotron Component"
Bootstrap 4.1.1 Snippet by zaradi