I am using bs-tabs + AngularJS
Code is as follows:
<div bs-tabs>
<div data-title="Tab1">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
</div>
I need to hide these tabs dynamically based on some event, say for example:
if hidden==true then hide it
i.e.
<div data-title="Tab1" ng-if="hidden">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
<input type="button" ng-click="hideTab()" />
$scope.hidden = true;
$scope.hideTab = function(){
$scope.hidden = false;
}
Initially hidden is set to true, which loads all three tabs. Later user triggers a click event which changes hidden to false resulting in tab1 to be hidden but Tab1 is not hiding.
Is there anyway we can hide bs-tabs dynamically?
Thanks in Advance
Related
I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
I have a group of divs that appear on multiple pages, that have this pattern:
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagOne
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagTwo
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagThree
</div>
</div>
</div>
</div>
</div>
This group appears on multiple pages.
My ideal javascript/jquery solution is something like this:
display:none on all div class="entry"
if child div class="entry-title" contains #something, change parent div class="entry" to display:block
so that on Page One I can insert this code to only show #hashtagOne, on Page Two only #hashtagTwo, etc. etc.
Try something like this:
$('.entry-title').each(function(i,v){
if ($(this).text().trim().charAt(0) =="#") {
$(this).closest('.entry').show();
}
});
https://jsfiddle.net/0ybstx9o/
This simply works fine :
$(document).ready(function(){
$(".entry").each(function(){
if($(this).find(".entry-title:contains('#something')").length > 0){
$(this).css("display","block");
}
});
});
Its pretty simple, just use :contains() and .closest() together either on page load or whatever event you want this display:block behavior to run.
As you want to show based on differnt pages, I suggest to use page title and set it to title="Page One" and title="Page Two" etc and then compare it in document ready state and show accordingly the desired div
jQuery(document).ready(function(){
jQuery('div.entry').hide();
if(jQuery(document).find("title").text() == 'Page One')
{
jQuery( "div.entry-title:contains('#something')" ).closest('.entry').show();
}
else if(jQuery(document).find("title").text() == 'Page Two')
{
jQuery( "div.entry-title:contains('#something Else')" ).closest('.entry').show();
}
});
$(".entry").find(".entry-title").text(function(key, text) {
if (text.indexOf("#")>=0) {
$(this).parents(".entry").hide()
}
})
Here is the working Plunker
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.
Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.
$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});
Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});