Here's the workflow I'm dealing with:
I have a collection of items, each having an ng-click event that triggers the display of an iframe below the clicked item. The process works like this:
- When clicking an item, a hidden
divtag beneath it appears, containing aniframe. - If another item is clicked from the same list, a new
divtag shows up below that item, displaying theiframefor the most recently clicked item.
The main challenge I'm facing right now is:
If there is already an open div tag with an iframe when clicking on a new item, the existing div gets closed before showing the new one along with its iframe.
Currently, if an iframe is already open and I click on another item, a new iframe opens without closing the previous one until I interact with it directly.
How should I handle this situation?
PS: I hope the scenario is clear, do let me know if you need more clarification.
Edit-
Sharing a jsfiddle link is quite challenging as this question is part of a large project folder I'm currently working on. Nevertheless, I'll include the code here in the hopes that it will suffice.
HTML:
<div ng-repeat="data in JsonData">
<div class="row" ng-click="getGraph(data.id, $index)">
<div class="col-lg-6 text-left">
<span id="title">Title: {{data.name}}</span><br><br>
<span style="color: #000 !important">
<strong>Id:</strong> {{data.id}}
</span><br/><br>
</div>
<div class="col-lg-4 text-left" style="color: #000 !important;">
<span style="text-align: left; font-size: 13px;">
<strong>Details:</strong> {{data.details}}
</span><br>
</div>
<div class="iframe col-lg-10 col-lg-offset-2">
<div class="ibox float-e-margins ibox_shadow">
<iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
</iframe>
</div>
</div>
</div>
</div>
And the controller.js code:
$scope.getGraph = function(d,i) {
$scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
var elem = document.getElementsByClassName(d);
$(elem).toggleClass('class_to_toggle_hide_show');
}