I have a collapsible div implemented in js, the function of which is show/hide it’s child divs etc.
So when you click on it, it toggles the div’s disappear. Something similar to a tree view
What i want to do is that, i should be able to select the data in the child divs, but the problem is. when I click on the child divs the parent divs disappears as the onclick gets trigger i guess.
Please suggest how to should i achieve this. So my goal is to toggle a div’s display which enclosing child divs, but if you select something or highlight something in child div the parent div shouldn’t collapse etc.
Please see code below.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Data</title>
<style>
#container {
clear: both;
width: 400px;
margin: 0 0;
border: none;
}
#row {
clear: both;
width: 100%;
border: none;
}
#column {
border: double #aca899;
float: left;
clear: none;
width: 402px;
}
#columnHeader p {
float: left;
clear: none;
text-align: center;
width: 100%;
height: 20px;
padding-top: 2px;
font-size: 8.0pt;
font-family: Verdana;
font-weight: bold;
color: black;
text-decoration: underline;
border: 1px ridge #aca899;
}
#subSectionHeader {
float: left;
clear: none;
width: 50%;
font-size: 7.5pt;
font-family: Arial;
background-color: #DBA083;
border: 1px ridge #aca899;
border-collapse: collapse;
padding: 1px;
}
#label {
float: left;
clear: none;
width: 50%;
font-size: 7.5pt;
font-family: Arial;
background-color: #F2CF93;
border: 1px ridge #aca899;
padding: 1px 1px 1px 11px;
}
#Value {
float: left;
clear: none;
width: 50%;
font-size: 7.5pt;
font-family: Arial;
background-color: #DDDDDD;
border: 1px ridge #aca899;
padding: 1px;
}
</style>
<script type="text/javascript">
function switchMenu(cur, e) {
var obj = e.target || e.srcElement; //works on IE and FF
var childDiv = cur.id + 'Child';
if (obj.parentNode.id != childDiv) {
var el = document.getElementById(childDiv);
if (el.style.display != "none") {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
}
</script>
</head>
<body>
<div id="container">
<div style="margin-top: 15px;"></div>
<div id="row">
<div id="column">
<div id="abc" onclick="switchMenu(this, event)">
<div id="columnHeader"><p>Section 1</p></div>
<div id="subSectionHeader"><p>Some Label I</p></div> <div id="subSectionHeader"><p> </p></div>
<div id="abcChild">
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
</div>
</div> <!--abc-->
<!--cde -->
<div id="cde" onclick="switchMenu(this, event)">
<div id="subSectionHeader"><p>Some Label II</p></div> <div id="subSectionHeader"><p> </p></div>
<div id="cdeChild">
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
<div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>
</div>
</div>
<!--cde -->
</div>
</div>
</div>
</body>
</html>
Your suggestion and help will be appreciated
Thanks for your time.
Do not perform action if the click is performed on the child div.
Update:
The edited structure is different as you have p inside div. I’ve modified the code to work with the new structure. Note that id must be unique. Your css messes up the layout and causing the code to fail. The code works if you take out your css.
This will be much simpler if you use jquery.
Code updated to include suggestion by RobG
Update2:
Fixing bug in findParent and more robust.