JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 

<html>

<head>

	<meta charset="UTF-8">
	<title>ICT and Defence - Communication</title>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	<link rel="stylesheet" type="text/css" href="responsive.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="myScript.js"></script>

	<link href='http://fonts.googleapis.com/css?family=Lobster|Oswald|Pacifico|Bangers|Anton|Sigmar One' rel='stylesheet' type='text/css'>
	
	<style>
	#communication-nav
	{
		border-bottom: 2px solid; 
	}
	</style>

	
</head>

<body>
<!---JavaScript SDK // For Social Media -->
<!---End of JavaScript --> 

<!--header moite-->
	<header>

		<div id="header-container">
			<h1>ICT and Defence</h1>
		</div>	
		<!--Navigation-->
			<nav>
					<div id="nav-wrapper">
							<ul id="main-menu">
								<li><a id="home-nav" href="index.html">Home</a></li>
								<li><a id="communication-nav" href="communication.html">Communication</a></li>
								<li><a id="drones-nav" href="drones.html">Drones</a></li>								
								<li><a id="future-nav" href="future.html">Future Soldiers</a></li>
							</ul>
					</div>
			</nav>
	</header>

	<div id="container">

		<div id="center-div">

			<div id="home-video">
				<h3>History</h3>
				<h4 class="h4-home">Communication</h4>	
				<img class="img" src="pictures/runner.jpg" alt="Runner" style="width:304px;height:228px;">				
				<p class="info">The first military communications included the utilization of runners or 
				the sending and receiving of simple signs, basic encrypted messages were sometimes used to conceal 
				the information only for the onlooker.</p><div class="hidden"><p class="info">The first distinctive employments of military interchanges were called "signals". 
				Cutting edge units work in these strategies are typically assigned as "sign corps". The Roman arrangement of military correspondence 
				is an early case of this. Later, the...

CSS

/************
General ;
************/

body {
	margin: 0;
	padding: 0;
	background: #f6f6f6;
}

a {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Bangers', cursive;
	font-size: 20px;
}

li {
	list-style-type: none;
}

#home-instagram iframe {
	width: 100%;
	height: 100%;
}


iframe{
	margin: 0;
	padding: 0;
	margin: 0 auto;
	display: block;
	border: 5px solid;
	width: 80%;
	height: 500px;
}

img {
	margin: 0;
	padding: 0;
}

p {
	font-family: 'Bangers', cursive;
}


/************
Header ;
************/


header {
	background-color: black;
	margin: 0;
}

header h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
	color: white;
	font-family: 'Oswald';
	font-size: 70px;
}


/************
Socail-Div // Header // Not implemented yet;
************/

#header-container {
    margin: 0 auto;
    padding: 0;
    width: 55%;

}

#socail-div iframe{
	margin: 0;
	padding: 0;
}

#socail-div {
	margin: 0;
	padding: 0px;
	clear: both;
	float: left;
}

.header-icon img{
	margin-right: 20px;
	width: 40px;
	float: left;
}



/************
Navigation ;
************/


#nav-wrapper {
    margin: 10px auto;
    width: 83%;
    clear: both;
}


#main-menu {
	margin: 0;
	padding: 0;

}

#main-menu > li {
	text-align: center;
	margin: auto;
	float: left;
	width: 20%;
}

#main-menu > li a {
	display: block;
	padding: 10px 0;
	font-size: 26px;
}

#main-menu,a:hover {
	background-color: #7B7B7B;
}
#main-menu, a:active {
	background-color: #626262;
}





/************
Container // for the body content;
************/

#container {
	overflow: auto;
	clear: both;
	width: 100%;
	height: 100%;
	margin: 200px auto;
	padding: 0;
	/*background-color: yellowgreen;*/

}


/************
Wrapper ;
************/

#center-div {
	
	width: 80%;
	padding: 2% 4%;
	background-color: #fefefd;
	margin: 20px auto;
	border: 1px solid;
	
	box-shadow: 0 0 20px #000;
}

/************
Side Wrappers; (Responsive.css)
************/



#right-div...

JavaScript

$(document).ready(function(){
	

    $(".hidden").hide();
	
    $("#hide").click(function(){
        $(".hidden").toggle();
    });
    $("#show").click(function(){
        $(".hidden").show();
    });
	
	$('#hide').button();//make it nice
	var text="new caption";
	$('#hide').children().first().html(text);
	
	
});

function btnChanger() {
	var i = 0;
	
	if(i % 2 == 0)
	{
		document.getElementById("hide").value="Hide";
	}
	else
	{
		document.getElementById("hide").value="Expand";
	}
    i++;
}