Swap Divs On Click / JavaScript syntax

Question

I know nothing of JavaScript... I'm close to what I need to achieve but there are few bugs that I think are caused by the poor quality of my JavaScript syntax.

The Goal: I have a main div with three links, each of which should replace onclick the original div by a new correspondent one. The user should be able to close the new content and return to the main one.

Problem 1: "display: none;" should take effect only after animation.

Problem 2: When you're back to the original main content div if you click the same link again it want display the correspondent div a second time. Animations also fail to take effect.

    $(function() {
    $("#opens-content-a").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-a").css("display","block");
        $(".content-a").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-a").click(function() {
        $(".content-a").toggleClass("slideOut");
        $(".content-a").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

$(function() {
    $("#opens-content-b").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-b").css("display","block");
        $(".content-b").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-b").click(function() {
        $(".content-b").toggleClass("slideOut");
        $(".content-b").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

$(function() {
    $("#opens-content-c").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-c").css("display","block");
        $(".content-c").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-c").click(function() {
        $(".content-c").toggleClass("slideOut");
        $(".content-c").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

HTML

<section> 
<div class="container"> 

    <div  class="content-main">
    <div id="column-left">
    <h1 id="opens-content-a">OPEN A</h1>Some Content</div>
    <div id="column-center">
    <h1 id="opens-content-b">OPEN B</h1>Some Content</div>
    <div id="column-right">
    <h1 id="opens-content-c">OPEN C</h1>Some Content</div>
    </div>

    <div  class="content-a">
    <div id="closes-content-a">X</div>
    Some Content
    </div>

    <div  class="content-b">
    <div id="closes-content-b">X</div>
    Some Content
    </div>

    <div  class="content-c">
    <div id="closes-content-c">X</div>
    Some Content
    </div>

    </div>

CSS

body {
    background-color: #24354c;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "arial", sans-serif;
}

p {
    text-align: left;
    padding: 20px 20px;
}

h1 { 
    color: #FF0000; 
    text-align: left;
    padding: 0px 20px;
}

section {
    display: table; 
    position: relative; 
    min-height: 100%;
    width: 100%;   
    background: #24354c; 
}

.container {
    display: table-cell;
    vertical-align: middle;
}

.content-main { 
    display: inline-block;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}
#column-left { float: left; width: 30%; }
#column-right { float: right; width: 30%; }
#column-center { display: inline-block; width: 30%; }

.content-a {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-b {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-c {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

#opens-content-a { cursor: pointer;}

#closes-content-a {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}    

#opens-content-b { cursor: pointer;}

#closes-content-b {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

#opens-content-c { cursor: pointer;}

#closes-content-c {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

/*-------------------------- SLIDE OUT ---------------------------*/
.slideOut { 
    animation-name: slideOut;
    -webkit-animation-name: slideOut;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s;  
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
} 

@-webkit-keyframes slideOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes slideOut { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
}

/*-------------------------- SLIDE IN ---------------------------*/

.slideIn {
    visibility: visible;
    animation-name: slideIn;
    -webkit-animation-name: slideIn;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;                    
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }       
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }   
}

This what I have so far JSFiddle

Answer 1

I've simplified the js a bit here but what you'll want to do is utilize the animationend event to run some code after the css animation is finished. You also may want to remove your animation classes from the elements after they have completed.

JS:

$(function() {
var main = $('.content-main');
var contentA = $(".content-a");
var contentB = $(".content-b");
var contentC = $(".content-c");

var openContent = function(content) {
    // run animation on main div
    main.addClass('slideOut');
    // do stuff after animation has ended
    main.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // Hide div
        main.css("display","none");
        // remove animation class
        main.removeClass("slideOut");
    });
    // show content div
    content.css("display","block");
    // run animation on content div
    content.addClass("slideIn");
    // do stuff after animation has ended
    content.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // remove animation class
        content.removeClass("slideIn");
    });
}

var closeContent = function(content) {
    // run animation on content
    content.addClass("slideOut");
    // do stuff after animation ends
    content.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // hide content
        content.css("display","none");
        // remove animation class
        content.removeClass('slideOut');
    });
    // show main div
    main.css("display","block");
    // run animation on main div
    main.addClass("slideIn");
    // do stuff after animation ends
    main.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // remove animation class
        main.removeClass("slideIn");
    });
}

$("#opens-content-a").click(function(){
    openContent(contentA);
});
$("#closes-content-a").click(function(){
    closeContent(contentA);
});

$("#opens-content-b").click(function(){
    openContent(contentB);
});
$("#closes-content-b").click(function(){
    closeContent(contentB);
});

$("#opens-content-c").click(function(){
    openContent(contentC);
});
$("#closes-content-c").click(function(){
    closeContent(contentC);
});
});

HTML:

<section>    
<div class="container"> 

<div  class="content-main">
<div id="column-left">

<h1 id="opens-content-a">OPEN A</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>
<div id="column-center">
<h1 id="opens-content-b">OPEN B</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>
<div id="column-right">
<h1 id="opens-content-c">OPEN C</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>

</div>

<div  class="content-a content">
<div id="closes-content-a">X</div>
<h1>CONTENT A</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

<div  class="content-b content">
<div id="closes-content-b">X</div>
<h1>CONTENT B</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

<div  class="content-c content">
<div id="closes-content-c">X</div>
<h1>CONTENT C</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

</div>
</section>

CSS:

body {
    background-color: #24354c;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "arial", sans-serif;
}

p {
    text-align: left;
    padding: 20px 20px;
}

h1 { 
    color: #FF0000; 
    text-align: left;
    padding: 0px 20px;
}

section {
    display: table; 
    position: relative; 
    min-height: 100%;
    width: 100%;   
    background: #24354c; 
}

.container {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.content-main {
    position: absolute;
    overflow:auto;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
    width: 80%;
    left: 10%;
}
#column-left { float: left; width: 30%; }
#column-right { float: right; width: 30%; }
#column-center { display: inline-block; width: 30%; }

.content {
    position: absolute;
    display: none;
    left: 10%;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

#opens-content-a { cursor: pointer;}

#closes-content-a {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}    

#opens-content-b { cursor: pointer;}

#closes-content-b {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

#opens-content-c { cursor: pointer;}

#closes-content-c {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

/*-------------------------- SLIDE OUT ---------------------------*/
.slideOut { 
    animation-name: slideOut;
    -webkit-animation-name: slideOut;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s;  
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
} 

@-webkit-keyframes slideOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes slideOut { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
}

/*-------------------------- SLIDE IN ---------------------------*/

.slideIn {
    visibility: visible;
    animation-name: slideIn;
    -webkit-animation-name: slideIn;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;                    
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }       
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }   
}

Sorry that my js is quite a bit modified from what you had but I wanted to add some clarity to my changes. Instead of having custom css classes for each item you might want to simplify it down like Syahrul suggested.

Here is my jsFiddle

Answer 2

I've updated your fiddle

There is no slideDown class in your fiddle.

I added class for each targeting ids so you can use

$('.slider').click(function() {
$('.close-content').click(function() {

instead of

$('#opens-content-a,#opens-content-b,#opens-content-c') {
$('#closes-content-a,#closes-content-b,#closes-content-c') {

Example

$(function() {
    $('.slider').click(function() {
        var getParent = 
            $('#'+($(this).attr('id')).replace('opens','closes'));
        
        $(".content-main")
        .removeClass("slideIn")
        .addClass("slideOut")
        .css("display","none");
        
        getParent
        .parent()
        .removeClass("slideOut")
        .addClass("slideIn")
        .css("display","block");
    });
    
    $(".close-content").click(function() {
        
       $(this)
        .parent()
        .addClass("slideOut")
        .removeClass("slideIn")
        .css("display","none");
        
        $(".content-main")
        .addClass("slideIn")
        .removeClass("slideOut")
        .css("display","block");

	});
    
});

body {
    background-color: #24354c;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "arial", sans-serif;
}

p {
    text-align: left;
    padding: 20px 20px;
}

h1 { 
    color: #FF0000; 
    text-align: left;
    padding: 0px 20px;
}

section {
    display: table; 
    position: relative; 
    min-height: 100%;
    width: 100%;   
    background: #24354c; 
}

.container {
    display: table-cell;
    vertical-align: middle;
}

.content-main { 
    display: inline-block;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}
#column-left { float: left; width: 30%; }
#column-right { float: right; width: 30%; }
#column-center { display: inline-block; width: 30%; }

.content-a {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-b {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-c {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

#opens-content-a { cursor: pointer;}

#closes-content-a {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}    

#opens-content-b { cursor: pointer;}

#closes-content-b {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

#opens-content-c { cursor: pointer;}

#closes-content-c {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

/*-------------------------- SLIDE OUT ---------------------------*/
.slideOut { 
    animation-name: slideOut;
    -webkit-animation-name: slideOut;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s;  
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
} 

@-webkit-keyframes slideOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes slideOut { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
}

/*-------------------------- SLIDE IN ---------------------------*/

.slideIn {
    visibility: visible;
	animation-name: slideIn;
	-webkit-animation-name: slideIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;					
}

@keyframes slideIn {
	0% {
	    opacity: 0;
		transform: translateY(-50%);
	}
		
	100% {
	    opacity: 1;
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideIn {
	0% {
	    opacity: 0;
		-webkit-transform: translateY(-50%);
	}
			
	100% {
	    opacity: 1;
		-webkit-transform: translateY(0%);
	}	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section>
    <div class="container">

        <div class="content-main">
            <div id="column-left">
                <h1 class="slider" id="opens-content-a">OPEN A</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p>
            </div>
            <div id="column-center">
                <h1 class="slider" id="opens-content-b">OPEN B</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p>
            </div>
            <div id="column-right">
                <h1 class="slider" id="opens-content-c">OPEN C</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p>
            </div>

        </div>

        <div class="content-a">
            <div class="close-content" id="closes-content-a">X</div>
            <h1>CONTENT A</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        </div>

        <div class="content-b">
            <div class="close-content" id="closes-content-b">X</div>
            <h1>CONTENT B</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        </div>

        <div class="content-c">
            <div class="close-content" id="closes-content-c">X</div>
            <h1>CONTENT C</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        </div>

    </div>
</section>