Hi! I'm using an html code I used in a general html code testing site and it worked but when I add it as embed code on my site it just lists the one line in the <p>...</p> but none of the others in <div>...</div>
Am I missing a line of code or something? Here's the code below.
Thank you!!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Monday')" id="defaultOpen">Monday</button>
<button class="tablinks" onclick="openCity(event, 'Tuesday')">Tuesday</button>
<button class="tablinks" onclick="openCity(event, 'Wednesday')">Wednesday</button>
<button class="tablinks" onclick="openCity(event, 'Thursday')">Thursday</button>
<button class="tablinks" onclick="openCity(event, 'Friday')">Friday</button>
<button class="tablinks" onclick="openCity(event, 'Saturday')">Saturday</button>
<button class="tablinks" onclick="openCity(event, 'Sunday')">Sunday</button>
</div>
<div id="Monday" class="tabcontent">
<h4>Monday</h4>
<p>Total 50 pushups today by breaking it into as many sets as you want</p>
</div>
<div id="Tuesday" class="tabcontent">
<h4>Tuesday</h4>
<p>Reach out to an old friend</p>
</div>
<div id="Wednesday" class="tabcontent">
<h4>Wednesday</h4>
<p>Hold a 2 minute plank</p>
</div>
<div id="Thursday" class="tabcontent">
<h4>Thursday</h4>
<p>Make 5 people smile today</p>
</div>
<div id="Friday" class="tabcontent">
<h4>Friday</h4>
<p>Try to max on pullups (can use a band or do negatives) three times</p>
</div>
<div id="Saturday" class="tabcontent">
<h4>Saturday</h4>
<p>Say thank you to a janitor or dining hall worker and learn their name</p>
</div>
<div id="Sunday" class="tabcontent">
<h4>Sunday</h4>
<p>Learn a new fun fact that you wouldn't have otherwise learned and share it with someone</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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
