Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
When i clicked on ADD Button, it's appearing the text in the bellow but it's appearing the same column. here is 2 input field.
i have used : <input id="accordion_input" type="text"/>
another one is : <div id="accordion_body" class="panel-body"></div>
So i want, if i fill-up the input and div area & clicked ADD button then i should be appear and second time if i clicked on add button then it's should be CLONE the First input data. The data must be showing on different column every clone part, not in the same column! Like the below snapshot:
$(document).ready(function() {
$('#Add_btn').click(function() {
$('#accordion_body').append($('#editableDiv').html());
var x = $("#accordion_input").val();
$("#accordion_title").append(x);
});
});
<html>
<head>
<title>404</title>
</head>
<body>
<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div><br/>
<div id="acc_main" contenteditable="false" class="accordion-main">
<div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" style="display: block"></a>
</h4>
<div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="display: block">
<div id="accordion_body" class="panel-body"></div>
</div>
</br>
</div>
</div>
</div>
</div>
<button id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Wrap the content in a <p> tag or insert a <br/> after each one.
I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.
For example, what appears on initial page load is this:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
Edit
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.
How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?
P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.
It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation
I'm trying to change the collapse behavior in bootstrap, but without success.
I want to create a page with small panels (maybe col-md-4 that I named tabs) that changes the width after click, when the panel collapse.
Here is a example first page:
Here is the same page after click in the "tabs":
My current code, can't hide the <div>something here</div> and change the panel's width.
Below is the code for one panel with simple collapse effect.
<section class="col-md-4">
<h3 class="page-header title">Forms</h3>
<div class="panel-group">
<div id="panel-form-1" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span class="glyphicon glyphicon-chevron-right"></span><a data-toggle="collapse" href="#panel1"> Panel #1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
<form role="form" id="form1">
<div class="row">
<div class="col-md-6">
<div>Stuff</div>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
</div>
<!-- Other panels-->
</div>
</section>
<div class="col-md-8 something">Something here</div>
JS (not working. No console errors):
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.collapse').on('show.bs.collapse', function (e) {
$(this).parent("section").removeClass("col-md-4").addClass("col-md-12");
$(document).find("div.something").hide();
});
</script>
My result page with opened panels is something like (please ignore the glyphicon problems):
I tried to follow the example in this another question here in SO, but I didn't understand it very well.
Is it possible achieve it using bootstrap?
Misc:
Bootstrap 3.3.7
JQuery 3.1.1
Chrome and Firefox
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>