I have a fake dog adoption site and i am just a beginner, so it is nothing special. I have it set up so that you can click on 1 of 6 buttons and it will display a small picture of each dog that fits the description. If you click the button a 2nd time, the pictures disappear.
It seems that everything is functional EXCEPT the ‘Puppies’ button has a weird affect on the ‘Special Needs’ button. I don’t know why, but the one button changes the position of the other. I have been working on this all weekend and I am so close to getting it to look right.
Please, if you can figure out what I am doing wrong, please let me know!
<!DOCTYPE html>
<html lang="en">
<header> <!-- ******* HEADER OPEN ********** -->
Stack Overflow Help Example <BR>
<link rel="stylesheet" href="SOFEX.css">
<script src="SOFEX.js" type="text/javascript"></script>
</header> <!-- ******* HEADER CLOSED********** -->
<body>
<main> <br>
<div class="grid-container6">
<div class="row"> <!-- ************** GRID OPEN ************ -->
<div class="column">
<button onclick="showMalesFunction()"> Show Male Dogs </button>
<div id="MalesBtn"> </div>
</div>
<!-- ************************************* -->
<div class="column">
<button onclick="showFemalesFunction()"> Show Female Dogs </button>
<div id="FemalesBtn"> </div>
</div>
<!-- ************************************* -->
<div class="column">
<button onclick="showPuppiesFunction()">
Show Puppy Dogs </button>
<div id="PuppiesBtn"> </div>
</div>
<!-- ************************************* -->
<div class="column">
<button onclick="showAdultFunction()"> Show Adult Dogs </button>
<div id="AdultBtn"> </div>
</div>
<!-- ************************************* -->
<div class="column">
<button onclick="showSeniorFunction()">
Show Senior Dogs </button>
<div id="SeniorBtn"> </div>
</div>
<!-- ************************************* -->
<div class="column">
<button onclick="SpecialNeedsFunction()"> Dogs With Special Needs </button>
<div id="SpecialNeedsBtn"> </div>
</div>
</div>
</div> <!-- ************** grid closed ********************-->
<script>
//---------------------------------------------------------//
var MaleArray = [
"<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>",
"<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>",
];
function showMalesFunction() {
var x = document.getElementById("MalesBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("MalesBtn").innerHTML = MaleArray;
} else {
x.style.display = "none";
} }
//---------------------------------------------------------//
var FemaleArray = [
"<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
"<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
"<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];
function showFemalesFunction() {
var x = document.getElementById("FemalesBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("FemalesBtn").innerHTML = FemaleArray;
} else {
x.style.display = "none";
} }
//---------------------------------------------------------//
var PuppiesArray = [
"<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
"<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>"
];
function showPuppiesFunction() {
var x = document.getElementById("PuppiesBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("PuppiesBtn").innerHTML = PuppiesArray;
} else {
x.style.display = "none";
} }
//---------------------------------------------------------//
var AdultArray = [
"<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>",
"<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
"<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];
function showAdultFunction() {
var x = document.getElementById("AdultBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("AdultBtn").innerHTML = AdultArray;
} else {
x.style.display = "none";
} }
//---------------------------------------------------------//
var SeniorArray = [
"<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
];
function showSeniorFunction() {
var x = document.getElementById("SeniorBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("SeniorBtn").innerHTML = SeniorArray;
} else {
x.style.display = "none";
} }
//---------------------------------------------------------//
var SpecialNeedsArray = [
"<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
"<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
]
function SpecialNeedsFunction() {
var x = document.getElementById("SpecialNeedsBtn");
if (x.style.display === "none") {
x.style.display = "block"
document.getElementById("SpecialNeedsBtn").innerHTML = SpecialNeedsArray;
} else {
x.style.display = "none";
} }
</script>
<style>
* {box-sizing: border-box; }
table {
border: 2px solid #3399CC;
text-align: left;
margin-left: auto;
margin-right: auto;
}
td {padding: 0.5em; border: 2px solid #923cb1;text-align: left; }
th {padding: 0.5em; border: 2px solid #3399CC; text-align: center; }
tr:nth-of-type(odd){background-color: #f5fafc;}
.column {
float: left;
width: 50%;
padding: 5px; }
.grid-container6 {
display: inline-grid;
grid-column: 10px;
text-align: center;
width: 100%;
border: 10px;
position: relative;
margin: 0 auto;
border-color: purple;
border-style: solid;
column-gap: 10px;
row-gap: 10px;
column-rule-color: #e0299a;
background-color: green;
}
button {
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
color: white;
font-size: 24px;
border-radius: 40px;
margin: 0 auto;
display: inline;
outline: none;
padding: 6px 12px;
background-color: #002171;
}
</style>
</div>
</div>
<!-- ************************************* -->
<!-- ************************************* -->
<!-- ************************************* -->
</main>
</body>
</html>