Skip to content
Advertisements

JavaScript Tabs Styled 1

CODEPEN:


Github:https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/JavaScript%20Tabs%20Styled%201


HTML CODE:

 <div class="container">

        <!--  title -->
        <h2>JavaScript Tabs</h2>

        <div class="main_box">

            <!-- top box -->
            <div id="tabs">
                <div class="tab tab_1">JavaScript</div>
                <div class="tab tab_2">Python</div>
                <div class="tab tab_3">CSS</div>
            </div>

            <!-- bottom box -->
            <div id="text_box">
                <div class="text tab_1_text" id="tab1">
                    JavaScript is one of the most popular and dynamic programming 
                    languages used for creating and developing websites. This 
                    language is capable of achieving several things including 
                    controlling the browser, editing content on a document that 
                    has been displayed, allowing client-side scripts to communicate
                    with users and also asynchronous communication. It was developed
                    by Netscape and borrows a lot of its syntax from C language. 
                    JavaScript is used very widely and effectively in creating desktop 
                    applications as well as for developing games.
                </div>
                <div class="text tab_2_text" id="tab2">
                    Python is a highly used and all-purpose programming 
                    language which is dynamic in nature. Being dynamic 
                    in nature means that you as a developer can write and
                    run the code without the need of a compiler. The design
                    of the language is such that it supports code readability
                    which means that its syntax is such that only a few lines 
                    of codes are needed to express a point or a concept. This
                    concept of code readability is also possible in the case 
                    of Java and C++, etc. This is a high-level or advanced 
                    language that is considered easy for beginners to 
                    understand and learn.
                </div>
                <div class="text tab_3_text" id="tab3">
                    CSS or Cascading Style Sheets is rather a markup language.
                    When paired with HTML, CSS allow a developer to decide and 
                    define how a web page or a website will eventually look or 
                    how it will appear to the visitors of the web platform. 
                    Some of the elements which CSS has an impact on include 
                    font size, font style, the overall layout, the colors and 
                    other design elements. This is a markup language that can be 
                    applied to several types of documents including Plain XML
                    documents, SVG documents as well as XUL documents. For most 
                    websites across the world, CSS is the platform to opt for if
                    they need help to create visually attractive webpages and
                    finds use not just in the creation of web applications but 
                    also mobile apps.
                </div>
            </div>
        </div>

    </div>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
html {
    height: 100%;
    font-family: 'Open Sans Condensed', sans-serif;
    user-select: none;
}
body {
    background: linear-gradient(to bottom right, #3D4258, #6670A0, #9688B4);
}
.container{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-25%);
    width: 500px;
    height: auto;
}
h2{
    text-align: center;
    color: #dedede;
    font-size: 40px;
    text-shadow: 0px 15px 15px #262626;
}
.main_box{
    position: relative;
    margin-top: 50px;
}
#tabs {
    width: 100%;
    height: 30px;
    font-family: sans-serif;
    font-size: 15px;
}
.tab {
    text-align: center;
    padding: 8px 10px 8px 10px;
    margin-right: 10px;
    background: #444c6a;
    border: 1px solid #dedede;
    border-radius: 30px;
    float: left;
    color: #dedede;
    transition: .5s;
    cursor: pointer;
    box-sizing: border-box;
}
.tab:hover{
    background: #3D4258;
    transform: scale(1.1);
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
}
#text_box{
    margin-top: 25px;
    clear: both;
    width: 100%;
}
.text {
    position: absolute;
    width: 100%;
    background: linear-gradient(45deg,#dedede,#d8d8d8);
    border-radius: 1px;
    padding: 20px 30px;
    box-sizing: border-box;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bold;
    color: rgba(5, 0, 0, 0.65);
    transition: .5s ease-in-out;
}
#tab1{ opacity: 1; }
#tab2, #tab3 { opacity: 0; }
.tab_1.active {
    background: #3D4258;
    transform: scale(1.1);
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
}
.tab_2.active {
    background: #3D4258;
    transform: scale(1.1);
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
}
.tab_3.active {
    background: #3D4258;
    transform: scale(1.1);
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
}

JS CODE:

  let tab1 = document.querySelector(".tab_1"),
            tab2 = document.querySelector(".tab_2"),
            tab3 = document.querySelector(".tab_3"),
            box1 = document.getElementById("tab1"),
            box2 = document.getElementById("tab2"),
            box3 = document.getElementById("tab3");

        tab1.addEventListener("click", function () {
            box1.style.opacity = 1;
            box2.style.opacity = 0;
            box3.style.opacity = 0;
            tab1.classList.add("active");
            tab2.classList.remove("active");
            tab3.classList.remove("active");
        });

        tab2.addEventListener("click", function () {
            box1.style.opacity = 0;
            box2.style.opacity = 1;
            box3.style.opacity = 0;
            tab1.classList.remove("active");
            tab2.classList.add("active");
            tab3.classList.remove("active");
        });

        tab3.addEventListener("click", function () {
            box1.style.opacity = 0;
            box2.style.opacity = 0;
            box3.style.opacity = 1;
            tab1.classList.remove("active");
            tab2.classList.remove("active");
            tab3.classList.add("active");
        });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: