Menu
In the following code, neither the .clearfix or .group class works correctlly
but I am at a loss as to why.
The only thing that seems to correct the problem is the inclusion
of the following line.
[code]
<!– br style=”clear:both” –> <!– works correctly with this line in place –>
But this defeats the purpose of either of the class definitions.
Any ideas as to what I’m doing wrong?
?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Menu Styles – Button Menu </title>
<!– clearfix NOT WORKING correctly ??? –>
<style type=”text/css”>
#apple,
#samsung,
#sony { border: 5px solid red; height: 100px; width: 100%; }
span { float: right; cursor: pointer; background-color: red; color: white; }
.hide { display: none; }
a { text-decoration: none; cursor: pointer; }
button { width: 80px; }
/* .group { } */
.group-item { width: 50%; float: left; }
.group:after { content: “”; display: table; clear: both; }
/* alternative to group:after from: http://cssmojo.com/the-very-latest-clearfix-reloaded/ */
/* */
.clearfix:after {
content: “”;
display: block;
clear: both;
}
/* */
#displayDivs { width: 90%; }
</style>
<body>
<div class=”clearfix”> <!– alternative to ‘group’ class below –>
<!– div class=”group” –>
<div class=”group-item”>
<h1>Vertical Groups</h1>
<h3>Button Grouping (toggle)</h3>
<div class=”Vbtn-group”>
<button>Apple</button><br>
<button>Samsung</button><br>
<button>Sony</button>
</div>
</div>
<div class=”group-item”>
<h1>Horizontal Groups</h1>
<h3>Button Grouping (toggle)</h3>
<div class=”Hbtn-group”>
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
</div>
<div>
<!– br style=”clear:both” –> <!– works correctly with this line in place –>
<!– –>
<p>
<div id=”displayDivs”>
<div id=”apple” class=”hide”> Apple <span onclick=”closeX(this)”>X</span></div>
<div id=”samsung” class=”hide”> Samsung <span onclick=”closeX(this)”>X</span></div>
<div id=”sony” class=”hide”> Sony <span onclick=”closeX(this)”>X</span></div>
</div>
<script>
function btnAction(IDS) {
document.getElementById(IDS).classList.toggle(‘hide’);
}
function init() {
var sel = document.getElementById(‘displayDivs’).querySelectorAll(‘div’);
var displayDivs = [];
for (let i=0; i<sel.length; i++) { displayDivs[i] = sel[i].id; }
sel = document.querySelectorAll(‘.Vbtn-group button’)
for (let i=0; i<sel.length; i++) { sel[i].addEventListener(‘click’, function() { btnAction(displayDivs[i]); }); }
/* —————————————————————————————————————– */
sel = document.querySelectorAll(‘.Hbtn-group button’)
for (let i=0; i<sel.length; i++) { sel[i].addEventListener(‘click’, function() { btnAction(displayDivs[i]); }); }
}
init();
function closeX(IDS) {
document.getElementById(‘apple’).classList.add(‘hide’);
document.getElementById(‘samsung’).classList.add(‘hide’);
document.getElementById(‘sony’).classList.add(‘hide’);
// document.getElementById(IDS).classList.add(‘hide’);
}
</script>
</body>
</html>