GalleryDragonSchool

Do Not Modify

by zoomzoom

HTML

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Style the tab */

        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* Change background color of buttons on hover */

        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */

        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */

        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
            text-align: center;
        }

        .tabcontent#tab1 {
            display: block;
        }

        .gallery-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

    </style>
</head>


<div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'tab1')">Summer Camp</button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">After School</button>
    <button class="tablinks" onclick="openTab(event, 'tab3')">Spring Festival 2019</button>
</div>

<div id="tab1" class="tabcontent">
    <img class="gallery-img" src="https://houstondragonacademy.org/img/news/RZBlqgnu6e2KuYy6xq1VpKYFYwAvq50kz22283qv.jpeg" alt="" />
</div>

<div id="tab2" class="tabcontent">
    <p>Coming Soon</p>
</div>

<div id="tab3" class="tabcontent">
    <p>Coming Soon</p>
</div>

<script>
    function...