I need to collapse multiple button and div using jQuery and bootstrap like this :
HTML:
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
JS:
$(function () {
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-up"></span> Hide');
})
})
but in action only work one button and div. how do can i fix this problem?!
DEMO
Use different id in the data-target. For example use #demo1 and #demo2 respectively.
Answer Edited as per Dynamic div & Button
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="open" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="close" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
// toggle content on click
$('[data-toggle="collapse"]').click(function () {
if ($(this).attr('data-start') == 'open') {
$(this).html($(this).attr('data-close-text'));
} else {
$(this).html($(this).attr('data-open-text'));
}
$(this).attr('data-start', $(this).attr('data-start') == 'open' ? 'close' : 'open');
});
// set initial content
$('[data-toggle="collapse"]').each(function () {
if ($(this).attr('data-start') == "open") {
$(this).html($(this).attr('data-open-text'));
} else {
$(this).html($(this).attr('data-close-text'));
}
});
If you only want one div open at a time you might be able to achieve this very easily using the data-toggle-="tabs" attribute on buttons inside of a list with the "nav" class. You can read more about this in the bootstrap JavaScript documentation.
You can't have the same id="button" (or any other ID) twice on two different elements in a file.
This should be the code that you are looking for, but it may be cumbersome to have too many levels of JS so you must map it to a class instead, and then use the parent() function
http://jsfiddle.net/mu4whyb6/
Related
I am trying to create a search function with tabbed feature. It is showing currently fine. No error at all.
Problem is when i want to click on any tab it need to show/hide some of the content of other tab.
Whenever i click on any div it is showing the div content but not hiding or showing anything.
<div id="newsearchs" class="row">
<div class="row">
<div class="col-xs-12">
<ul id="myTab" class="nav# nav-tabs test">
<li class="active">People
</li>
<li>Jobs
</li>
<li>Location
</li>
</ul>
</div>
</div>
<div class="col-xs-12">
<div class="input-group input-group-md">
<input type="text" id= "search_value" class="form-control " placeholder="Search for ...">
<input name="search_location" id="search_location" placeholder="Location" class="form-control txt-auto"/>
<div id="people" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Looking For <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Student
</li>
<li>Teacher
</li>
<li>Institue
</li>
</ul>
</div>
<div id="jobs" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<div id="locations" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<!-- /btn-group --> <span class="input-group-btn">
<button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Here are the jquery code which not working at the moment.
<script type="text/javascript">
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab b').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab c').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'loca')) {
alert('Hi');
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
// }
$(this).tab('show');
})
</script>
According to me $('#myTab c').click(function (e) { is not firing.
Please advise what am i doing wrong.
You have a number of HTML and JS formatting issues.
you have commented out a closing { before the third tab show call, ie. // }, you will need to uncomment this out
you are referring to html elements that dont exist. #myTab b and #myTab c are trying to look for html elements of tags <b> and <c>, but you're trying to attach handlers to the <a> tags, in which case, you can combine a lot of your code
your if statements appear to be looking for when the id is not equal to something, which would mean 2 lots of show/hide's would be getting triggered per tab change, these should be simplified to (ideally a switch statement) handle each tab's click event individually
you have a number of unclosed <div> tags, and a stray # in your class definition of your myTab element.
JSFIDDLE
JS
$(function() {
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function(e) {
e.preventDefault();
if (($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'loca')) {
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
}
$(this).tab('show');
})
})
my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?
You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.
For large screen I want just the list to show without the collapsible button and when it comes to mobile I want this button to show just like this. I've tried putting hidden-lg or visible-xs on the button tag but it deletes the whole row for the large screen. How can I have a collapsible button to show for mobile only ? Thanks in advance!
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Show
</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
custom.js
$(function(){
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
})
})
I've also tried
#demo{
display: none;
}
#media (min-width: #screen-md-min) {
#demo{
display: block;
}
}
#Deebs, I expanded on your proposal since I believe the expected behavior in mobile would be for the #demo div to be hidden and to be shown/hidden when clicking on #button.
// Pure JS
document.getElementById("button1").addEventListener("click", function() {
var disp = document.getElementById("demo1").style.display;
document.getElementById("demo1").style.display = disp === "" || disp == "none" ? "block" : "none";
this.innerHTML = disp === "" || disp === "none" ? "Hide" : "Show";
});
// jQuery
$("#button2").on("click", function() {
$("#demo2").toggle();
$("#button2").text( $("#demo2").css("display") === "block" ? "Hide" : "Show" );
});
#demo1, #demo2 {
display:none;
}
#button1, #button2 {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Pure JS:</strong></p>
<button id="button1" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-collapse-down"></span> Show</button>
<div id="demo1" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<p><strong>jQuery:</strong></p>
<button id="button2" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-collapse-down"></span> Show</button>
<div id="demo2" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
The verbiage of your question is a little confusing... and your media query looks funky. Try
#demo{
display: none;
}
#media screen and (min-width: 780px) {
#demo{
display: block;
}
}
This will keep the demo div hidden on screens smaller than 780px, and visible on screens wider than 780px. If you want to hide/show the button itself, you'd have to add that CSS as well.
I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?
You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});
I am trying load content into a tab when clicked on a button. But the below code takes me to the first tab instead.
HTML CODE:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#overview" >Overview</a></li>
<li class=""><a href="#site" >Manage Sites</a></li>
<li class="" style="display:none;"><a href="#department" >Departments</a></li>
</ul>
</div>
<div class="tab-pane" id="site">
<div class="container center">
<h3 class="center">Sites Management</h3>
<tr>
<td><input type="text" class="form-control name" id="site_name{ID}" value="{NAME}">/td>
<button type="button" class="btn btn-default btn-sm dropdow`enter code here`n-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#dept-container" class='manageDepartments' id='{ID}'>Manage departments</a></li>
</ul>
</td>
</tr>
</div>
</div>
<div class="tab-pane" id="department">
<div class="container center" id="dept-container">
<h3 class="center">Departments Management</h3>
</div>
</div>
Jquery:
$('.manageDepartments').on( 'click', function( event ) {
var urlLinks = $(this).attr("href");
$("#site").load(urlLinks);
});
Can anyone tell me what's wrong in here?
Thanks in advance
$('.manageDepartments').on( 'click', function( event ) {
event.preventDefault();
$("#site").html($($(this).attr("href")).html());
});