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

<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> <div class="tablinks" onclick="openTab(event, 'Graphic')" onmouseover="openTab(event, 'Graphic')"> <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png"> <br /> <b class="icon-title">Graphic Design</b> </div> <div class="tablinks" onclick="openTab(event, 'Funnel')" onmouseover="openTab(event, 'Funnel')"> <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/pie-chart-2-xxl.png"> <br /> <b class="icon-title">Funnel Strategy</b> </div> <!-- this is your tabs content --> <div id="Web" class="tabcontent"> <div class="tab-icon" > <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png"> </div> <div class="tab-cc" > <h3> Web Design </h3> List your information here. be captitavation yadda yadda yadda. <div class="btn-div-action"> <a href="#link" > TAKE ACTION </a> </div> </div> </div> <div id="Graphic" class="tabcontent"> <div class="tab-icon" > <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png"> </div> <div class="tab-cc" > <h3> Graphic Design </h3> Will design anything. <div class="btn-div-action"> <a href="#link" > TAKE ACTION ⇒ </a> </div> </div> </div> <div id="Facebook" class="tabcontent"> <div class="tab-icon" > <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png"> </div> <div class="tab-cc" > <h3> Facebook Ads </h3> We're masters at facebook ads. <div class="btn-div-action"> <a href="#link" > TAKE ACTION ⇒ </a> </div> </div> </div> <div id="Funnel" class="tabcontent"> <div class="tab-icon" > <img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png"> </div> <div class="tab-cc" > <h3> Funnel Mastery </h3> Will consult and help you build an awesome funnel. <div class="btn-div-action"> <a href="#link"> TAKE ACTION </a> </div> </div> </div> </div> </div>
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; } /* experiment */ #tab-cc { text-align:justify } #tab-cc div { display:inline-block; background:black; padding:0 0.5em; color:white; vertical-align:middle; line-height:70px } .tabcontent img, .tablinks img { max-width: 100px; clear: both; text-align: center; margin: 15px; } .tabcontent{ clear:both; text-align:left; } /* Style the tab */ .btn-div-action a{ position:relative; left:-14px;} .tab { overflow: hidden; } /* Style the buttons inside the tab */ .tab div { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; margin: 0 auto; } .tab-cc{float:left;max-width:70%;} /* Change background color of buttons on hover */ .tab div:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab .active { background-color: #eee; border-bottom: solid 4px gold; } .btn-div-action{ clear: both; margin: 0; float:right; } .btn-div-action a{ padding:12px 20px; background-color:#003366; color:#fff;text-decoration:none; } /* Style the tab content */ .tab-icon{ float:left;padding:25px; } .tabcontent { display: none; padding: 6px 12px; border: none; border-top: solid 2px #eee; box-shadow: -3px -7px 8px #ddd; } /* fades */ .tabcontent { animation: fadeEffect 1s; /* Fading effect takes 1 second */ } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }
/* 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();

Related: See More


Questions / Comments: