boxes

by Dan Wright

HTML

<div id="skillBoxes" class="clear">
    <div class="row-col3-col1-30pc">
        <div id="box1" class="box">
             <h2>Languages</h2>

             <h3 class="initial">Regular use of Client-side scripting languages -</h3>

            <p class="initial">jQuery</p>
            <p class="initial">HTML & CSS</p>
            <p class="initial">XSLT & XML</p>
             <h3 class="final hidden">learning Server-Side Scripting & Database Technology -</h3>

            <p class="final hidden">PHP</p>
            <p class="final hidden">Phython</p>
            <p class="final hidden">SQL & NoSQL</p> <a class="moreLink" href='#'>More . .</a>

        </div>
    </div>
    <div class="row-col3-col2-30pc">
        <div id="box2" class="box">
             <h2>Software</h2>

             <h3 class="initial">Capable of using and picking up swiftly the latest tools -</h3>

            <p class="initial">Netbeans</p>
            <p class="initial">Online IDE's</p>
            <p class="initial">Adobe & MS office</p>
             <h3 class="final hidden">Constantly trying new software -</h3>

            <p class="final hidden">Android studio 1.0</p>
            <p class="final hidden">Google Web Designer</p> <a class="moreLink" href='#'>More . .</a>

        </div>
    </div>
    <div class="row-col3-col3-30pc">
        <div id="box3" class="box">
             <h2>CMS</h2>

             <h3 class="initial">Experienced using a variety of Content Management Systems -</h3>

            <p class="initial">HP Autonomy Interwoven TeamSite</p>
            <p class="initial">Drupal</p>
             <h3 class="final hidden">Enjoy trying new systems -</h3>

            <p class="final hidden">django</p>
            <p class="final hidden">Symphony</p> <a class="moreLink" href='#'>More . .</a>

        </div>
    </div>
</div>

CSS

.hidden {
    display:none;
}
#skillBoxes {
    height:200px;
    width:960px;
    ;
    height:auto;
    margin:0 auto;
}
#box1 {
}
#box2 {
}
#box3 {
}
.box {
    width:98%;
    max-width:300px;
    height:300px;
    padding:2%;
    margin:0 auto;
    background-color:#68553b;
}
.row-col3-col1-30pc {
    float: left;
    width: 33%;
    height: auto;
    /* margin-left: 100px; */
}
.row-col3-col2-30pc {
    float: left;
    width: 32%;
    height: auto;
    padding-left: 1%;
    padding-right: 1%;
}
.row-col3-col3-30pc {
    float: left;
    width: 33%;
    height: auto;
}

JavaScript

jQuery(function ($) {

    $(document).ready(function () {
        changeSkillContent();
    });

    //var changeSkillContent = function () {
        $(".box").on("click", function () {
            name = $(this).attr("id");
            alert("Name: #" + name);
            if ($("#" + name).find('h3.initial, p.initial').length !== 0) {
                $("#" + name).children("h3.initial, p.initial").fadeOut('fast', 'linear');
                $("#" + name).children("h3.final, p.final").fadeIn('slow', 'linear');
            }
        });
    //};

    //var removeInitial = (function () {});
    //$.when( changeSkillContent() ).done(function(){
       // $("#" + name).children("h3.final, p.final").fadeIn('fast', 'linear');
    //});
    //$('p:eq(2)').promise().done($("#" + name).children("h3.final, p.final").fadeIn('slow', 'linear'));

});