Apple Discount Center

by Jeroen Broerse

HTML

<div id="serviceBox">
    <div class="serviceBox1" align="center">
        <div id="mac1"> <a href="#">Mac<img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox2" align="center">
        <div id="iphone1"> <a href="#"> iPhone        <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox3" align="center">
        <div id="iPad"> <a href="#">iPad         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox4" align="center">
        <div id="Accessoires"> <a href="#">Accessoires         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox4" align="center">
        <div id="Accessoires"> <a href="#">Aanbiedingen         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
</div>
<p></p>
<div id="macdiv">
    <p>DIV VAN MACs</p>
    <div class="serviceBox1">
        <div id="Mac"> <a href="#">         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox2">
        <div id="iPhone"> <a href="#">         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox3">
        <div id="iPad"> <a href="#">         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
    </div>
    <div class="serviceBox4">
        <div id="Accessoires"> <a href="#">         <img src="http://s3.amazonaws.com/ClubExpressClubFiles/748044/graphics/Mac_1624891939.jpg"></a>

        </div>
   ...

CSS

#serviceBox {
    width:100%;
    margin: 0 auto;
    margin-top:5px;
    border:1px solid #bdbdbd;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
    align-items: center;
    border:0px solid #bdbdbd;
    float:left;
    width:20%;
}
img {
    max-width: 100%;
    max-height: 100%;
}
.box {
    //height: 250px;
    //background-color: white;
    border:1px solid #bdbdbd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px #bdbdbd;
    -webkit-box-shadow: 0 0 10px #bdbdbd;
    box-shadow: 0 0 10px #bdbdbd;
}
#macdiv {
   // position: relative;
    float: left;
    top: 150px;
    display: none;
}
#iphonediv {
    //position: absolute;
    float: left;
    display: none;
    top: 150px;
}

JavaScript

$(document).ready(

function () {
    
    $('#mac1').click(function(e){    
        $('#macdiv').fadeOut('slow', function(){
            $('#iphonediv').fadeIn('slow');
        });
    });
    
        $('#iphone1').click(function(e){    
        $('#iphonediv').fadeOut('slow', function(){
            $('#macdiv').fadeIn('slow');
        });
    });

    
   

});