Is there a pure HTML way to keep the collapsed panels open while the radio button triggering them is selected? Every example I find lets the opened panel close again when the same Opening Button is clicked again.
I'd like to have the collapsed panel say visible when the triggering radio button is pressed again.
Examples of the opened panel closing when clicked multiple times:
https://codepen.io/martinkrulltott/pen/waRXgw
https://www.bootply.com/U8J7eJh3O6
You can try something like this. After you get the functionality you want you can style with bootstrap components.
HTML:
<form>
Display Panel:
<input type="radio" name="portion_selection" value="button_one" /> Yes
<input type="radio" name="portion_selection" value="button_two" /> No
<div id="portion_one" style="display:none">
<div class="card">
<div class="card-body">
1. This is some text within a card body.
</div>
</div>
</div>
<div id="portion_two" style="display:none">
<div class="card">
<div class="card-body">
2. This is some text within a card body.
</div>
</div>
</div>
</form>
JS:
$("input[name='portion_selection']:radio")
.change(function() {
$("#portion_one").toggle($(this).val() == "button_one");
$("#portion_two").toggle($(this).val() == "button_two"); });
Example Codepen: https://codepen.io/brooksrelyt/pen/GzWzOv
Related
I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.
In my angular js project, I have four checkboxes. in that four checkboxes, three checkboxes have three conditions (like ng-hide and ng-show) and one checkbox has select all and deselects all conditions.
everything working fine. but initially if you select, select all checkbox everything got selected and conditions also working fine(other three checkboxes also got selected). but later without deselecting all checkbox if you uncheck the other three checkboxes that condition (like ng-hide and ng-show) not working.
Any way to fix this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
<div class="choose-group pt-0">
<input
type="checkbox"
ng-model="exptResultType.status"
value="1" >status
<input
type="checkbox"
ng-model="exptResultType.headercontent"
value=2>header
<input
ng-show="addNlpStepForm.restfulEntity.method != 'HEAD'"
type="checkbox"
ng-model="exptResultType.bodycontent"
value=3>body
<input
type="checkbox"
id="all"
ng-click="(exptResultType.status=exptResultType.all);
(exptResultType.headercontent=exptResultType.all);
(exptResultType.bodycontent=exptResultType.all)"
ng-checked="exptResultType.status&&exptResultType.headercontent&&
exptResultType.bodycontent"
name="exptResultType"
ng-model="exptResultType.all"
value=4>all
</div>
<!-- show status content-->
<div class="form-group pb-30 ts-col-100"
ng-show="(exptResultType.status==true)||(exptResultType.all==true)" >
status code
</div>
<!-- header content -->
<div class="form-group d-flex flex-wrap ts-col-100 pb-10"
ng-show="(exptResultType.headercontent==true)||(exptResultType.all==true)">
header
</div>
<!-- body content -->
<div class="form-group pb-0 ts-col-100" ng-show="(exptResultType.bodycontent==true)||(exptResultType.all==true)">
body
</div>
</div>
The problem is that exptResultType.all will still be true, while the checkbox for all is coupled to the other three values, the property itself is not. The easiest thing to do is ignore the fact it exists for computation purposes:
<!-- show status content-->
<div class="form-group pb-30 ts-col-100"
ng-show="exptResultType.status">
status code
</div>
<!-- header content -->
<div class="form-group d-flex flex-wrap ts-col-100 pb-10"
ng-show="exptResultType.headercontent">
header
</div>
<!-- body content -->
<div class="form-group pb-0 ts-col-100"
ng-show="exptResultType.bodycontent">
body
</div>
I'm writing a code in HTML and it has 2 buttons, say a and b. I want to pass something in my URL that will trigger the button. I know how we do it for div.
<div class="a">
<a name="a" /> This is Div A
</div>
<div class="b">
<a name="b" /> This is Div B
</div>
and I can directly pass myURL.com#a/myURL.com/#b, to go to that div. But I want to know if I can do it using buttons.
Thanks
Yes you can do it with some javascript like:
<button onclick="window.location='#a';">Go to Div A</button>
If you want either button A OR button B to be visable you can use this:
CSS
.button {
display: none;
}
.button:target {
display: block
}
HTML
<!-- link in the same page -->
go to button 1<br>
go to button 2<br>
<!-- link from external page -->
go to button A<br>
go to button B<br>
<!-- buttons will only be visable when linked to -->
<a class="button" id="A"><input type="button" value="button A"></a>
<a class="button" id="B"><input type="button" value="button B"></a>
If you just want to jump to the button you answered your own question.
Just wrap the <div id="A"> around the button.
First add the id attribute to the div. Eg; <div class="b" id="part-b">
Then just link to mypage.html#part-b, eg; <a href="mypage.html#part-b>Go to part b</a>
I'm using Bootstrap 3.0 with its grid system and have on my page two divs one above the other.
I want to let the users the ability to switch the view so these divs will be one aside the other (on clicking a button). Can I do it using only CSS3?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div class="alert alert-info">
<!-- first div content-->
</div>
<div class="alert alert-info">
<!-- second div content-->
</div>
</div>
</div>
</div>
You can use input checkbox for control state and make lable as button. Checkbox must be placed before your code.
In HTML:
<input type="checkbox" id="checkbox">
<label for="checkbox">It's button</label>
<div class="your_div">Your div</div>
Then you have two chunk of CSS:
#checkbox{ %unchecked state% }
#checkbox ~ .your_div{ %unchecked state% }
and
#checkbox:checked{ %checked state% }
#checkbox:checked ~ .your_div{ %checked state% }
Some time ago I test this trick http://codepen.io/KZee/pen/JdZeqv and it works perfect.
I am working on creating a form page.
I have broken the problem into three meta challenges:
Creating the navigation within the form
Producing all the various inputs for the form
Appropriately display items from #2 based on selections in #1.
Right now, I am working on item #2
I have attached the output of my code from within Coda 2
I'm using an accordion for #1 and it appears to work just fine.
When I add the first two items from #2, they also appear to work just fine, staying aligned expected next to the accordion.
Ideally, what I want to do is align the lower radio buttons as well as any subsequent form inputs so they are immediately below the radio button/text inputs that are outside the sidebar and do not wrap under the accordion and into the sidebar. That is what is happening now.
I'm obviously missing something about how to apply my content within the bootstrap grid appropriately using containers, rows and class=col-md-n.
Marston
Here is what I think is the relevant code:
<!-- standard document stuff + jumbotron --->
<div class="container-fluid">
<div class="sidebar">
<div class="col-md-2">
<div class="panel-group" id="accordion">
<!-- NAVIGATION ITEMS --->
<!-- lots of working code that produces the accordion --->
</div>
</div>
</div>
<hr/>
<!-- radio buttons --->
<form class="form-horizontal">
<fieldset>
<!-- bunch of working code here that produces radio buttons --->
</fieldset>
</form>
<hr/>
<!-- Text input --->
<div class="main Content active Content">
<form role="form">
<div class="col-md-3">
<!-- more code here that produces text input --->
</div>
<!-- repeats for each form group --->
<!-- more code that works --->
</form>
</div>
</div>
<!-- check box section _-->
<!-- Preferred Contact Time --->
<form role="form">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="radios1">Available Weekdays</label>
<div class="col-md-3">
<!-- Lots of radio button code --->
</div>
</div>
<!-- Repeats for 2nd set --->
</fieldset>
</form>
For disclosure, I haven't tasted your code.
From a quick look I have noticed that you're not putting your "col"s into rows. This will cause your layout to act strange.
Standard way to structure your elements is to use col inside row inside container :
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
Hope that helps.