Колоквиумска-Интерактивни Апликации

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kolokviumska</title>
<script src="jquery/jquery-ui.css"></script>
    <script src="jquery/jquery-3.1.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <style>

        #tabContainer{
            display: inline-block;
            vertical-align:top;

        }

        #sidebar{
            display: inline-block;
            vertical-align:top;
            border: solid;
            border-width: 1px 1px 0px 1px;
            border-color: black;
            width: 200px;
        }

        #sidebar > button{
            width:100%;
            border-bottom: solid 1px black;
        }

        button{
            padding: 10px;
            background-color: lightgray;
            border: none;
        }

        .side{
            padding:2px;
            border-bottom: solid 1px black;
            background-color: whitesmoke;
        }

        #tabs > button{
            border-right: solid 1px black;
        }

        #tabs{
            width: 500px;
            background-color: darkgray;
            border: solid 1px black;
        }

        #content{
            width: 700px;
            height: 700px;
            padding-top:20px;
            padding-bottom:20px;
            background-color: cadetblue;
            border: solid;
            border-width: 0 1px 1px;
            border-color: black;
        }

        ul{
            margin: 0;
        }
        #list2{
            float: left;
        }
        #list1 div{
            margin: 10px;


            padding: 10px;
            float: left;
        }


        #list2 div{
            margin: 10px;


            padding: 10px;
            float: left;
        }
        #list3 div{
            margin: 10px;


            padding: 10px;
            float: left;
        }
    </style>
</head>
<body>

<script>
    var current = 1;
    function tab(x){
        if(current != x){
            $("#b"+current).css({"background-color":"lightgray"});
            $("#b"+x).css({"background-color":"cadetblue"});
            $("#list"+current).hide();
            $("#list"+x).show();
            current = x;
        }
    }
    function slide(x){
        $("#side"+x).slideToggle();
    }


</script>

<div id="tabContainer">
    <div id="tabs" style="width: 700px">
        <button id ="b1"  style="background-color: cadetblue" onclick="tab(1)">Current</button><button id ="b2" onclick="tab(2)">Achived</button><button id ="b3" onclick="tab(3)">Upcoming</button>
    </div>
    <div id="content">
        <div id="list1">
            <div id="stanford">

                <img src="podatoci_gr1/1_ml.png" alt="machine learning class" style="width: 300px; height: 169px">
                <p>Machine learning</p>
                <p>Stanford University</p>

            </div>
            <div id="duke">
                <img src="podatoci_gr1/2_brain_icon.jpg" alt="Brain and Space" style="width: 300px; height: 169px">
                <p>The Brain and Space</p>
                <p>Duke University</p>
            </div>
            <div id="Jonhns">
                <img src="podatoci_gr1/3_StatReason1.jpg" alt="Statistical" style="width: 240px; height: 135px">
                <p>Statistical Reasoning for Public Health 1:<br>
                    Estimation, Inference, & Interpretation</p>
                <p>Jonhns Hopkings University</p>
            </div>


        </div>

        <div id="list2">
            <div id="JohnsH">

                <img src="podatoci_gr1/4_fmri1.png" alt="frmri" style="width: 300px; height: 169px">
                <p>Statistical Analysis of fMRI Data</p>
                <p>Jonhs Hopkings University</p>

            </div>
            <div id="StanfordU">
                <img src="podatoci_gr1/12_.png" alt="Mining Massive Datasets" style="width: 300px; height: 169px">
                <p>Mining Massive Datasets</p>
                <p>Stanford University</p>
            </div>
            <div id="wahington">
                <img src="podatoci_gr1/6_cn.png" alt="computational" style="width: 300px; height: 190px">
                <p>Computational Neuroscience</p>
                <p>Washington University</p>
            </div>
            <div id="JohnsH2">
                <img src="podatoci_gr1/7_Rprogramming.jpg" alt="RPrograming" style="width: 300px; height: 190px;">
                <p>R Programing</p>
                <p>Johns Hopkins University</p>
            </div>


        </div>
        <div id="list3">
            <div id="johns3">


            </div>

        </div>


    </div>
</div>
<div id="sidebar">
    <button onclick="slide(1)">Friends</button>
    <div class = "side" id = "side1" style="display: none">
        <ul>
            <li>Partners</li>
            <li>Programs</li>
            <li>Developers</li>
            <li>Translate</li>
        </ul>
    </div>
    <button onclick="slide(2)">Connect</button>
    <div class = "side" id = "side2" style="display: none">
        <ul>
            <li>Google+</li>
            <li>Twitter</li>
            <li>Facebook</li>
            <li>Blog</li>
            <li>Tech Blog</li>
        </ul>
    </div>
    <button onclick="slide(3)">More</button>
    <div class = "side" id = "side3" style="display: none;">
        <ul>
            <li>Terms</li>
            <li>Privacy</li>
            <li>Help</li>
            <li>Contact</li>
        </ul>

    </div>
</div>
<script>
    $(document).ready(function(){
        $("p").hover(function(){
            $(this).css("background-color", "blue");
        }, function(){
            $(this).css("background-color", "transparent");
        });
    });
    </script>
})
</body>
</html>