generated from Skynet/deploy_user
79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title> Cian O'Shaughnessy's Website </title>
|
|
<link rel="stylesheet" href= "style.css">
|
|
</head>
|
|
|
|
<h2>Tabs</h2>
|
|
<p>Click on the buttons inside the tabbed menu:</p>
|
|
|
|
<div class="tab">
|
|
<button class="tablinks" onclick="openCity(event, 'Home')">Home</button>
|
|
<button class="tablinks" onclick="openCity(event, 'Blogs')">Blogs</button>
|
|
<button class="tablinks" onclick="openCity(event, 'Links')">Links</button>
|
|
</div>
|
|
|
|
<div id="Home" class="tabcontent">
|
|
<h3>Home</h3>
|
|
<p>Welcome to my Page</p>
|
|
</div>
|
|
|
|
<div id="Blogs" class="tabcontent">
|
|
<h3>Blogs</h3>
|
|
|
|
<button class="accordion">Section 1</button>
|
|
<div class="panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
|
|
<button class="accordion">Section 2</button>
|
|
<div class="panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
|
|
<button class="accordion">Section 3</button>
|
|
<div class="panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
|
|
<script>
|
|
var acc = document.getElementsByClassName("accordion");
|
|
var i;
|
|
|
|
for (i = 0; i < acc.length; i++) {
|
|
acc[i].addEventListener("click", function() {
|
|
this.classList.toggle("active");
|
|
var panel = this.nextElementSibling;
|
|
if (panel.style.display === "block") {
|
|
panel.style.display = "none";
|
|
} else {
|
|
panel.style.display = "block";
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<p> Here are my Blogs.</p>
|
|
</div>
|
|
|
|
<div id="Links" class="tabcontent">
|
|
<h3>Links</h3>
|
|
<p>The links i use.</p>
|
|
</div>
|
|
<script>
|
|
function openCity(evt, cityName) {
|
|
var i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tabcontent");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablinks");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(cityName).style.display = "block";
|
|
evt.currentTarget.className += " active";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|