I have both of these functions working independent of each other but I cannot get them to work together (I am a very jr. programmer, so please be kind and descriptive).
I have 8 div’s with unique id’s. I can Toogle these from open to closed without issue using Class and Id tags. Inside of each of these Div’s are three other Div’s. One will be visible upon opening the Div and two will be hidden. I have a hyperlink (that works, but all 8 containers only operate in the last Div box instead of their own) to ToggleVisible – using get element by id and change display property – on the 3 div’s inside the Parent div (and it works but only in my 8th container.). Is there a way to change the display: by Class and Id in by modifying my existing code (I am not a javascript guru, very very jr)?
<div style="border-color:#999999; border:6px" >
<li class="breadcrumbs boxHeader " style=" box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); width:100%; position: relative; border-color:#FFFFFF; border:none">
<a href="#" onClick="return false" onMouseDown="javascript:toggleSlideBox('picBox8');" style="text-decoration:none; width:80%;"><div align="left" >
<img src="images/toggleBtn1.png" alt="Toggle" width="22" height="25" border="0" style="position:relative; vertical-align:middle;" /> End of Life
</div></a>
<div align="right" style="width:20%;">
<a href="#" onClick="return false" onMouseDown="javascript:switchVisible('stageBox8');" style="text-decoration:none; font-size:9px; padding-right:2px;">All / By Stage</a>
</div>
</li>
<div class="editBox" id="picBox8" style="border-color:#CCCCCC; border-style:solid; border-width: 1px;">
<div class="stageBox" id="stageBox8" >
<li class="breadcrumbs">
<a href="#" id="1" onClick="return false" onMouseDown="javascript:toggleSlideBox();" value="Click" class="breadcrumbs__item gray">1</a>
<a href="#" id="2" onClick="return false" onMouseDown="javascript:toggleSlideBox();" value="Click" class="breadcrumbs__item gray">2</a>
<a href="#" id="3" onClick="return false" onMouseDown="javascript:toggleSlideBox();" value="Click" class="breadcrumbs__item gray">3</a>
<a href="#" id="4" onClick="return false" onMouseDown="javascript:toggleSlideBox();" value="Click" class="breadcrumbs__item gray">4</a>
<a href="#" id="5" onClick="return false" onMouseDown="javascript:toggleSlideBox();" value="Click" class="breadcrumbs__item gray">5</a>
</li><br />
</div>
<li class="ticketwrap " id="eol">
<?php include "ticket_g.php"; ?>
<?php include "ticket_y.php"; ?>
<?php include "ticket_r.php"; ?>
<?php include "ticket_g.php"; ?>
<?php include "ticket_r.php"; ?>
<?php include "ticket_g.php"; ?>
<?php include "ticket_g.php"; ?>
</li>
<div class="taskBox" id="taskBox8">
<?php include "task-panel.php"; ?>
</div>
</div>
</div>
script
<script type="text/javascript">
function toggleSlideBox(x) {
if ($('#'+x).is(":hidden")) {
$(".editBox").slideUp(200);
$('#'+x).slideDown(300);
} else {
$('#'+x).slideUp(300); // if you want all other open divs to close on new click - remove the function below this //
}
}
function toggleSlideBox(x) {
if ($('#'+x).is(":hidden")) {
$("ticketwrap").slideUp(200);
$('#'+x).slideDown(300);
} else {
$('#'+x).slideUp(300);
}
}
// this is to try to hide the ticketwrapper at the same time it shows the taskbox - figure out code - it works but just on taskBox8 #id's aren't working //
function switchVisible(x) {
if (document.getElementById('stageBox1')) {
if (document.getElementById('taskBox1').style.display == 'none') {
document.getElementById('stageBox1').style.display = 'block';
document.getElementById('taskBox1').style.display = 'block';
document.getElementById('ideation').style.display = 'none';
}
else {
document.getElementById('stageBox1').style.display = 'none';
document.getElementById('taskBox1').style.display = 'none';
document.getElementById('ideation').style.display = 'flex';
}
}
}
function switchVisible(x) {
if (document.getElementById('stageBox2')) {
if (document.getElementById('taskBox2').style.display == 'none') {
document.getElementById('stageBox2').style.display = 'block';
document.getElementById('taskBox2').style.display = 'block';
document.getElementById('proj_gov_plan').style.display = 'none';
}
else {
document.getElementById('stageBox2').style.display = 'none';
document.getElementById('taskBox2').style.display = 'none';
document.getElementById('proj_gov_plan').style.display = 'flex';
}
}
} etc...
Again, the ToggleVisible all works… but only in Div8. So Div 1,2,3,4,5,6,7,8 all toggleVisible Div 8 only. The desired outcome is for the stageBox and taskBox to be visible when ticketwrap is hidden and visa versa.
Is there a way to use the class + id to change the display properties?
(I’m very jr. so please be nice)