I have a list of lists of elements. I want to collapse each of these inner lists using a collapsible button from bootstrap. I've tried this:
<button id="button" type="button" data-toggle="collapse" data-target="#demo" style="display : hidden">
Click to collapse
</button>
<c:forEach items="${list.elements}" var="element">
<div id="collapsibleElement" class="collapse in">
${element.content}
</div>
</c:forEach>
This works if I have just one element in the list, after clicking the button the text collapses. However, it doesn't work for more elements in the list. A correct number of buttons is created, however after clicking any button only the text under first button collapses.
The id stays the same for all elements and my guess is that this may be cause of the problem. Any suggestions how to solve this issue?
Related
I'm using Bootstrap 5's Accordion component. Good news: it works perfectly well!
But the button for collapse the accordion is big, so I want to add an additional link in it, for some extra stuff.
<div class="accordion accordion-flush" id="myaccordion">
<div class="accordion-item">
<!-- important part starts here -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-001" aria-expanded="false" aria-controls="collapse-001">
<img src="https://picsum.photos/50/50" alt="such a nice pic"/>
<p>Sneak peek of what will appear</p>
Let's go
<button>
<!-- important part is over -->
<div id="collapse-001" class="accordion-collapse collapse" aria-labelledby="heading-001" data-bs-parent="#myaccordion">
<div class="accordion-body">
<p>Hidden stuff goes here</p>
</div>
</div>
</div>
<div class="accordion-item">
...
</div>
</div>
What I want : Clicking anywhere in the button will open the accordion, but not if I click on the link. If I click on the link, I want to follow the href.
What I get : Clicking anywhere in the button will open the accordion, even if I click on the link.
I tried to add an extra e.preventDefault() or e.stopPropagation() on the link, without success :(
Any idea?
I tried nesting the anchor inside the button but it won't work. The click event is always catched at the button level.
I didn't check bootstrap source code to check for alternatives but found a way to achieve what you asked using the following method: puth both the button and the link as children of a div and tweak with css to keep it visually on the same "line".
<h2 class="accordion-header" id="headingOne">
<div class="d-flex">
<div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</div>
<a class="outlink" href="https://pullman.clubify.cl">Let's go</a>
</div>
</h2>
I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.
// HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I am developing an application using jquery mobile where I need to display a list of records with check box and collapsible button.
By clicking the check box user can select multiple records.
By clicking collapsible button he can view record detail.
I fond below code on internet but its not working:
<ul data-role=”listview”>
<li class="ui-li-1line-check2">
<span class="ui-li-text-main">1line-check2</span>
<form><input type="checkbox" name="c1line-check2"/></form>
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"> </div>
</li>
</ul>
Thanks!