Scribd Logo
Upload

Welcome to Scribd!

  • Basic CSS ACCORDIAN

    Uploaded by

    Sourav Nayak
    11 views11 pages
    CSS ACCORDIAN IN HTML & CSS

    Original Title

    Basic-CSS-ACCORDIAN-converted

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS ACCORDIAN IN HTML & CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views11 pages

    Basic CSS ACCORDIAN

    Uploaded by

    Sourav Nayak
    CSS ACCORDIAN IN HTML & CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    CSS ACCORDIAN

    Step1: Create a html file and Save (FileName.html)


    Step2: Create a CSS file and Save (FileName.css)

    Step3: LINK ur CSS file with HTML file by add the bellow line in
    your HTML document inside <head> tag
    <link rel="stylesheet" type="text/css" href="FileName.css">

    Inside HTML file

    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS Accordian</title>
    <link rel="stylesheet" type="text/css" href="Accordian.css">

    To link CSS file with HTML file


    </head>
    <body>
    <div class="content">
    <h1><b><center>HEADING</center></b></h1>

    Creating a div with class name = accordian

    <div class="accordian">
    Creating a div with class name =
    <div class="accordian-tab"> accordion-tab

    <input type="checkbox" id="toggle1" class="accordian-


    toggle" name="toggle"> An input type checkbox is taken and give that
    checkbox a id which is = toggle1 so that when the
    checkbox is tick  then the content is shown.

    <label for="toggle1">Any TEXT</label>


    Line
    by <label for = ”checkbox-id”> is given so that when
    line
    someone click the checkbox the lable is also click.
    for is used to link the checkbox  and label

    <div class="accordian-content">

    Creating a div with class name = accordion-content


    This is the div where the content is shown when
    click. We put whatever text or img we want to
    display after label is click and expand.
    Content which will display after label
    is expand when we click.

    <p> Any thing you want to write any text you want to write this is a
    paragraph. Any thing you want to write any text you want to write this
    is a paragraph. Any thing you want to write any text you want to write
    this is a paragraph.</p> </div> </div>

    <div class="accordian-tab">
    <input type="checkbox" id="toggle2" class="accordian-
    toggle" name="toggle">
    <label for="toggle2">Any TEXT</label>
    <div class="accordian-content">
    <p> Any thing you want to write any text you want to write this is a
    paragraph. Any thing you want to write any text you want to write this
    is a paragraph. Any thing you want to write any text you want to write
    this is a paragraph.</p>

    </div>
    </div>

    You can copy paste the above code incide the box as many time you
    want to get depends on how many lable you want JUST CHANGE
    id="toggle2,3,4,5……" & for="toggle2,3,4,5……."
    Respectively.
    </div> </body> </html>
    AFTER HTML YOUR FILE LOOK LIKE THIS…… NOW CSS PART

    NOW CSS
    INSIDE CSS FILE
    *{ *(STAR) is a universal selector

    * means everthing present get that CSS properties


    box-sizing: border-box;
    which is given inside
    margin: 0;
    box-sizing: border-box; this prevent to increase
    padding: 0;
    width of a div when padding is given
    }

    body{

    background-image: url(image.jpg);

    background-size: cover;

    background-attachment: fixed;

    font-family: arial,sans-serif;

    .content{

    background: white; SAME AS PREVIOUS

    width: 70%;

    padding: 40px;

    margin: 100px auto;

    border-radius: 10px;

    }
    .accordian{

    width: 60%;

    margin: 50px;

    background: #fff;

    AT THIS MOMENT YOUR FILE LOOK LIKE THIS….

    .accordian-tab > label { It mean the label inside the div


    “accordian-tab”. > this symbol name as
    color: #fff; child selector. accordion-tab er modhe
    direct j label a6ey setar CSS
    background: #2980b9;

    font-size: 16px;

    line-height: 24px

    font-weight: bold;
    position: relative;
    given so that we can apply
    position: relative;
    animation in the label
    display: block;
    display: block; given to get a properties of
    padding: 12px 20px;
    block & so that every label align vertically
    cursor: pointer; below each other

    border-top: 1px solid #ddd; It will make the mouse cursor to pointer
    (hand symbol cursor)
    }

    AT THIS MOMENT YOUR FILE LOOK LIKE THIS….

    accordion-tab er modhe jei accordion-


    .accordian-tab > .accordian-content { content a6ey setar CSS kora

    Hide the content by applying


    max-height: 0; max-height=0…. So that first time when u
    transition: all .4s; open this page it remain hide.

    overflow: hidden; It hide the text which is overflowing from


    the box after applying height=0;
    }

    .accordian-tab > .accordian-content p { Div er under jei paragraph


    gulo a6ey setar CSS
    padding: 15px 20px;

    line-height: 20px;

    .accordian-tab > .accordian-toggle: checked ~ .accordian-content {

    max-height: 100vh; Accordion-tab er modhe jei accordion-


    toggle ta a6ey seta jokhun checked ()
    } hobe tokun…. accordion-toggle er
    immediate porey e jai accordion-content ta
    .accordian-tab .accordian-toggle {
    a6ey seta display hoi jabe.
    display: none;
    Tar por jotoh checkbox ( ) 6ilo se
    }
    gulo k hide kre debo display:none;
    krey

    You might also like