I created a payment page for mobile in php with bootstrap. If visitor click the text the panel is expanding. But if visitor clicks nearby text the panel is not expanding. This is not useful.
How can we transform collapsed panel to full clickable ?
You can manually toggle the accordion with $('#myAccordion').collapse('toggle')
Just set an event handler to watch for clicks on whatever area you want to be clickable, and then toggle the accordion.
For reference: http://getbootstrap.com/javascript/#collapse
You will need to put the "href" attribute on the div element with class "panel-heading", also put there the "data-toggle" attribute. Like This:
<div class="panel-heading invisible" data-toggle="collapse" href="#collapseOne">
<h1 class="panel-title">
Title
</h1>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
Hope That Helps, dont forget to put the same ID to the "panel-collapse" element that holds the "panel-body". Good Luck :)
Related
I found this stackoverflow questions which looks to be the same problem I am having. That is the default behavior is for angular ui-bootstrap accordion to only open when you click on the panel title and not anywhere else on the panel.
ng-click on accordion panel header
The solutions presented seems to get out of sync when one time clicking on the panel and then clicking on the title. Sometimes you have to click twice to get it back in sync. I noticed this snippet on the documentation, To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS.
Can someone provide and example of using div tags instead of anchor elements?
You have to customise the template for accordion-group to use clickable links otherwise it will trigger unexpected routing. You can modify the template as below:
<script id="uib/template/accordion/accordion-group.html" type="text/ng-template">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">
//this is previously <a role="tab"> - replace it with div
<div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</div>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="" ng-transclude></div>
</div>
</script>
You can put this template in your view where you are using accordion. This will override your default accordion-group template that comes from angular ui bootstrap tpls library.
I'm creating an accordion group using bootstrap 3, here is the code:
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h3>Purchase No: 123 </h3>
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
content here
</div>
</div>
</div>
The code works fine when I open the accordion, but when I click it again (to close), it collapses, and open up again.
In short the accordion can't be closed once opened. I noticed the element changes at this particular div
<div id="collapse1" class="panel-collapse collapse in">
In that state the the accordion is collapsed, and when I close it, the class changes to collapsing (showing the animation) then it is removed. But briefly after that, the class "collapsing" and "in" added again so in the browser when I try to close an accordion it will like somehow shows "bouncy" animation which make it never closed when I try to close it
Any suggestions?
thanks all for the suggestions, but it is looks like i was using an older version of jquery which is not compatible with bootstrap 3, found this error on firefox's web inspector(idk but firebug does not point this error). I am now using jquery 2.x and the accordions works perfectly
I'm trying to build an off-canvas push footer.
The idea is that that when selecting different options from the footer menu, the rest of the page gets pushed up to show the footer content
There is a tutorial for a sliding footer menu here but since it slides the [footer] content on top (as in top-layer) of the page this is not what I am looking for.
By using the bootstrap "accordion" I have managed to have the content drop down below the page, but since this falls outside the field of view (browser window), I am afraid that some visitors will not find it.
Here is a FIDDLE
<div class="pushDown">Please scroll down to bottom</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading col-xs-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div class="panel-heading col-xs-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
CONTENT 1
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
CONTENT 2
</div>
</div>
</div>
</div>
Is there anyway to have the panels push up the rest of the content instead of dropping down?
Option 2 - here I have tweaked Christopher Yee's plugin to behave as I need but I can only get it to work with one button
PushFooter
$(function() {
var pushy = $('.pushy'), //menu css class
body = $('body'),
container = $('#container'), //container css class
push = $('.push'), //css class to add pushy capability
siteOverlay = $('.site-overlay'), //site overlay
pushyClass = "pushy-left pushy-open", //menu position & menu open class
pushyActiveClass = "pushy-active", //css class to toggle site overlay
containerClass = "container-push", //container open class
pushClass = "push-push", //css class to add pushy capability
menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
menuSpeed = 300, //jQuery fallback menu speed
menuWidth = pushy.width() + "px"; //jQuery fallback menu width
function togglePushy(){
body.toggleClass(pushyActiveClass); //toggle site overlay
pushy.toggleClass(pushyClass);
container.toggleClass(containerClass);
push.toggleClass(pushClass); //css class to add pushy capability
}
How would I edit the JS if I would use the class names .pushy-left2 .menu-btn2 .pushy2 etc..
Try to make an #id stick to the content area of the footer, and make a link in the trigger of the accordion.
when you click the link make it link to the content area 'a href="mysite.com/home#article"'
so it centers the page on that piece of information
I have a form with various kinds of inputs, text, drop downs, radial buttons, sliders, and checkboxes. My "Reset" button is outside of the form (above the form). Is there a way to click the button and set all of the inputs back to default?
I have a Twitter Bootstrap accordion, with the reset button on the accordion header. The form is below inside of the accordion. I want to be able to clear the form whether the accordion is expanded or collapsed.
Example:
Accordion heading (Expanded) Reset
input fields
Accordion heading (collapsed) Reset
My reset is in my html like so:
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
and I was trying to do this in my javascript file:
#icon-Reset.click(function(){
$('#form').get(0).reset();
});
but I cannot get anything to work.
To be more clear, here is the top of the html that has the above html line in it:
<div id="side-bar-container">
<div id="sideBar">
<div class="accordion" id="mainAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#mainAccordion" data-target="#collapseOne"> <i
class="icon-chevron"></i>Accordion Heading1
</a>
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
</div>
<div id="collapse" class="accordion-body collapse in">
<div class="accordion-inner scrollable">
<div id="Accordion1">
<form id="form"class="form-search form-horizontal">
<fieldset>
I am VERY new to Javascript, HTML, etc, so please be detailed...Thanks!!
Your approach was correct, but you have to attach form reset action to the click event of your button. It can be any control, assuming it's a span with id "reset"
<span id="reset">Reset</span>
You can make clicking on it reset form with id "form" like this:
$('#reset').click(function() {
$("#form")[0].reset();
})
This code attaches action to span's "onclick" event and inside of action gets the form and resets it. Here's a small demo - fill the form and then click Reset:
http://jsfiddle.net/29ewk/
I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle