Bootstrap Snippet [Raw Straight Javascript] Tabs and Styles using HTML CSS Javascript

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.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 ---------->
<!-- created by jody.lee.fitzpatrick(a)outlook.com
websitedesigner.pro want more? contact me.
if you like this buy me a cup of coffee paypal.me/jodyf
-->
<h3 style="text-align:center;color:#fff;font-size:52px;">
    Sort of Simple Tabs</h3>
<div id="maintabholder">
  <div class="tab">
    <!-- this is a tab -->
    
    <div class="tablinks" onclick="openTab(event, 'Web')" id="defaultOpen" onmouseover="openTab(event, 'Web')">
      <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
      <br />
      <b class="icon-title">Web Design</b>
    </div>
    <!-- end tab -->
    <!-- additional tabs -->
    <div class="tablinks" onclick="openTab(event, 'Facebook')"  onmouseover="openTab(event, 'Facebook')">
      <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/facebook-7-xxl.png">
      <br />
      <b class="icon-title">Facebook Ads</b>
    </div>
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
body {
  font-family: Arial;
  padding-bottom:550px;
  background:#000;
}
#maintabholder{ max-width:800px; margin: 0 auto; }
/* you can skip this */
/* this needs to be in a  style tag contact me if you need to know how to do this */
/* fixes for styling */
.tab-icon{float:left;padding:25px;}
.btn-div-action {
  clear: both;
  padding-top: 40px;
}
#maintabholder {
  text-align: center;
  margin: 0 auto;
  background-color:#fff;
}
.icon-title {
  clear: both;
  text-align: center;
}
.tab {
  margin: 0 auto;
background:#eee;
}
.tab-links{ spacing:justify; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* this needs to be in a script tag  */
function openTab(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"[Raw Straight Javascript] Tabs and Styles"
Bootstrap 4.0.0 Snippet by careercoder

Related: See More

Questions / Comments:

"[Raw Straight Javascript] Tabs and Styles" Bootstrap 4.0.0 Snippet by careercoder

Related: See More

Questions / Comments:

"[Raw Straight Javascript] Tabs and Styles"
Bootstrap 4.0.0 Snippet by careercoder