Encountering a unique issue with Bootstrap 3 collapsible panels while designing a web page. The layout consists of images in one column and panels in another, where clicking on an image or panel link reveals a hidden overlay div with an updated iframe src attribute based on a custom tag. Strangely, when clicking on a panel link, the overlay briefly appears then disappears. Debugging efforts employed breakpoints in the code to find why the div is reverting to hidden status immediately. A workaround was discovered by avoiding anonymous jQuery functions and using explicit event handlers instead. Seeking insights into why the original approach failed.
Code snippet:
<div class="row" id="contentBlock">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="survey-panel-heading">
<h4>Training Library</h4>
</div>
<div class="panel-body">
<p class="czsurvey-help-block" style="margin-bottom:10px;">Click on a category to see available training items</p>
<div class="panel-group" id="library">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#library" href="#category1">
Category #1
</a>
</h4>
</div>
<div id="category1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a onclick="return fireOverlay(this);" training-target="../resources/summary_2014_04_11_1397235407.pdf">Working Training 1</a></li>
<li><a href="" class="trainingselector" training-target="../resources/summary_2014_04_11_1397235407.pdf">Not Working Training 1</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group col-md-8">
<div class="panel panel-default">
<div class="survey-panel-heading">
<h4>Training Recommended for you</h4>
</div>
<div class="panel-body text-center">
<p class="czsurvey-help-block" style="margin-bottom:10px;">Click on a training item to view</p>
<div class="row">
<div class="col-md-3">
<img class="img-thumbnail trainingselector" src="../resources/Renders/SideViewReported.png" training-target="../resources/summary_2014_04_11_1397235407.pdf"/>
<h4>Training 1</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trainingoverlay">
<div id="trainingcontent">
<iframe id="contentdisplay" src="" frameborder="0" style="width:90%; height:88%;" scrolling="no"></iframe>
<h4 style="color:White;">Was this training helpful?
<span style="color:White;">
<input type="radio" id="A1" name=Q1 value="yes">Yes
<input type="radio" id="A2" name=Q1 value="no">No
</span>
</h4>
<label class="btn btn-czbacknext" id="closebutton">
Close Training
</label>
</div>
</div>
Javascript:
$(document).ready(function () {
$(".trainingselector").click(function () {
$("#contentdisplay").attr("src", $(this).attr("training-target"));
$("#trainingoverlay").show();
$("#trainingcontent").show();
});
$("#closebutton").click(function () {
$("#contentdisplay").attr("src", "");
$("#trainingoverlay").hide();
$("#trainingcontent").hide();
});
});
function fireOverlay(element) {
$("#contentdisplay").attr("src", $(element).attr("training-target"));
$("#trainingoverlay").show();
$("#trainingcontent").show();
}
Relevant CSS (how I hide the overlay...)
#trainingoverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,.55);
display: none;
z-index: 1;
}
#trainingcontent {
position: fixed;
width: 50%;
height:60%;
margin-left: 25%;
padding-top:2%;
top: 150px;
text-align: center;
display: none;
overflow: hidden;
z-index: 100;
background-color: rgba(0,0,0,.9);
}