Brendan Jackson Brendan Jackson - 4 months ago 10
HTML Question

an "off button" under "on button" in javascript

I have some circle divs that when click toggle showing a child div using javascript but I want to have the area round the circle div hide the child. If you have the deselect function tied to the container for the circles they stop working because the two functions cancel so I have tried having a separate div inside the container that uses css position and z-index to occupy the same space as the container without having the "parent circle divs" as its children. This also does not work as depending on the z-index values either one element OR the other gets its function run and if they have the same z-index the circles :hover doesn't even work let alone the Javascript.

Codepen.io



var tydParent = [null, document.getElementById("tydP1"), document.getElementById("tydP2"), document.getElementById("tydP3"), document.getElementById("tydP4"), document.getElementById("tydP5"), document.getElementById("tydP6"), document.getElementById("tydP7"), document.getElementById("tydP8"), document.getElementById("tydP9"), document.getElementById("tydP10")
]

var tydChild = [null, document.getElementById("tydC1"), document.getElementById("tydC2"), document.getElementById("tydC3"), document.getElementById("tydC4"), document.getElementById("tydC5"), document.getElementById("tydC6"), document.getElementById("tydC7"), document.getElementById("tydC8"), document.getElementById("tydC9"), document.getElementById("tydC10")
]

var tydState = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function tydToggle(tydNum) {
if (tydState[tydNum] == 0) {
tydDeselect();
tydParent[tydNum].className = "tydParentActive shadow4a tydParent";
tydChild[tydNum].style.display = "block";
tydState[tydNum] = 1;
} else {
tydParent[tydNum].className = "shadow4a tydParent";
tydChild[tydNum].style.display = "none";
tydState[tydNum] = 0;
}
}

function tydDeselect() {
for (i = 1; i < tydState.length; i++) {
tydState[i] = 0;
tydChild[i].style.display = "none";
tydParent[i].className = "shadow4a tydParent";
}
}

.tydContainer {
position:relative;
height: auto;
width: 100%;
margin: 0;
padding:0 75px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}

.tydParent {
/*z-index:2;*/
width: 110px;
height: 110px;
border: 2px solid #93305D;
border-radius: 55px;
margin: 10px;
cursor:pointer;
background-color: #cccccc;
}

.tydParent:hover{
background-color: #93305D;
border-color: #F2F1F1;
}

.tydParentActive{
background-color: #F63E37 !important;
border-color: #F2F1F1 !important;
}

.tydParentPosition {
position: relative;
}

.tydClickoff{
/*z-index:1;*/
position: absolute;
width:100%;
height:100%;
bottom:0;
left:0;
}

.tydChild {
z-index:3;
overflow:hidden;
display: none;
position: absolute;
bottom: 100%;
width: 350px;
height: 300px;
left: -110px;
background-color: #E3EBF1;
border-radius: 10px;
border: 1px solid #333333;
}

.tydImageBlock {
display: flex;
width: 350px;
height: 70%;
margin: 5px 0;
}

p.tydChildDescription {
width: 100%;
height: 30%;
line-height: 16px;
font-size:14px;
padding: 10px;
color: #333333;
text-align: center;
}
#tydP1 {
background-image: url('test2.png');
}

#tydP2 {
background-image: url('test2.png');
}

#tydP3 {
background-image: url('test2.png');
}

#tydP4 {
background-image: url('test2.png');
}

#tydP5 {
background-image: url('test2.png');
}

#tydP6 {
background-image: url('test2.png');
}

#tydP7 {
background-image: url('test2.png');
}

#tydP8 {
background-image: url('test2.png');
}

#tydP9 {
background-image: url('test2.png');
}

#tydP10 {
background-image: url('test2.png');
}

<div class="tydContainer">

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP1" onclick="tydToggle(1)"></div>
<div class="shadow4a tydChild" id="tydC1" style="background: url('KQLY2.png');">
<div class="tydImageBLock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP2" onclick="tydToggle(2)"></div>
<div class="shadow4a tydChild" id="tydC2" style="background: url('KQLY1.png');">
<div class="tydImageBlock" ></div>
<p class="tydChildDescription bOWhite1">stack overflow<a href="https://sakaiproject.org/">MORE&#8680;</a></p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP3" onclick="tydToggle(3)"></div>
<div class="shadow4a tydChild" id="tydC3" style="background: url('KQLY3.png');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP4" onclick="tydToggle(4)"></div>
<div class="shadow4a tydChild" id="tydC4" style="background: url('KQLY4.gif');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP5" onclick="tydToggle(5)"></div>
<div class="shadow4a tydChild" id="tydC5" style="background: url('KQLY5.gif');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP6" onclick="tydToggle(6)"></div>
<div class="shadow4a tydChild" id="tydC6" style="background: url('KQLY6.gif');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP7" onclick="tydToggle(7)"></div>
<div class="shadow4a tydChild" id="tydC7" style="background: url('KQLY4.gif');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP8" onclick="tydToggle(8)"></div>
<div class="shadow4a tydChild" id="tydC8" style="background: url('KQLY3.png');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP9" onclick="tydToggle(9)"></div>
<div class="shadow4a tydChild" id="tydC9" style="background: url('KQLY2.png');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydParentPosition">
<div class="shadow4a tydParent" id="tydP10" onclick="tydToggle(10)"></div>
<div class="shadow4a tydChild" id="tydC10" style="background: url('KQLY6.gif');">
<div class="tydImageBlock"></div>
<p class="tydChildDescription bOWhite1">stack overflow</p>
</div>
</div>

<div class="tydClickoff" style="border: 1px solid violet;" onclick="tydDeselect()"></div>

</div>
</div>




Answer

You should stop the click-event from propagating to the outer div, using event.stopPropagation().

See https://plnkr.co/edit/MqNhHJy9m5vtgrwOWgVh?p=preview

onclick="tydToggle(event, 1)"
...
function tydToggle(event, tydNum) {
    event = event || window.event;
    event.stopPropagation()
    ...
Comments