I'm relatively new to web programming (i.e. less than a month).
What I am trying to do is create a nice smooth hide/reveal effect for an FAQ list, as can be seen on this webisite:
http://www.hl.co.uk/pensions/sipp/frequently-asked-questions
I realise that this website is using javascript to create the effect, but I was wondering if there was anyway to do this with just CSS.
The HTML5 < details > < summary > tags seem to work fine in terms of structure (despite only working in chrome and safari):
<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details>
The only problem is that the transitions are very harsh, and yet I can't seem to use CSS transitions as I want the animation on a click, rather than hover etc (plus the properties don't change so there is nothing to transition between).
Is there anyway of doing this, or does it just require getting to grips with Javascript? Obviously that is the next step anyway, I was just hoping there was a way to do this in CSS so that I could get this working asap.
Thanks in advance.
If you get creative, this can actually be done with pure CSS.
(PS - I only put a <form> wrapper to allow the radio buttons to be reset without affecting the multiple-choice checkbox buttons)
Here is a nice example for you
CSS
span, p {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
input[type="reset"] {
display: block;
border: 1px solid pink;
background: maroon;
color: white;
padding: 5px;
margin: 5px;
font-family: sans;
}
p {
float: left;
clear: left;
overflow: hidden;
display: table-row;
}
label {
width: 100%;
font-size: 200%;
font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
border: none;
background: transparent;
display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
display: block;
float: left;
clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
opacity: 0;
height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
opacity: 1;
height: auto;
}
HTML
<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
<p class="option">
<input type="radio" id="one" name="hard" />
<label for="one">OneOneOneOne</label>
<span><input type="reset" form="singles" value="Hide" />
If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="two" name="hard" />
<label for="two">TwoTwoTwoTwo</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="radio" id="three" name="hard" />
<label for="three">ThreeThreeThreeThree</label>
<span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="four" name="hard" />
<label for="four">FourFourFourFour</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
<p class="option">
<input type="checkbox" id="one2" name="easy" />
<label for="one2">OneOneOneOne</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="two2" name="easy" />
<label for="two2">TwoTwoTwoTwo</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="checkbox" id="three2" name="easy" />
<label for="three2">ThreeThreeThreeThree</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="four2" name="easy" />
<label for="four2">FourFourFourFour</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>
Make two classes. Each with different transitions.
Use toggleClass to change your html element to the class with the transition you want.
jQuery toggleClass
It still uses javascript, but it's just a simple class switch so your animations will be smoother.
If you only have a small number of items, Deryck's answer suits you best.
However, if it's a large amount, Javascript/jQuery is your best bet.
How it's done:
jQuery:
$('.detail').slideUp(); //hides all the details
$('.item').on('click', function({
$('.detail').slideUp(); //hides any shown details
$(this).next().toggleSlide(); //shows the details of the item selected
});
HTML:
<div class="item">Item 1</div>
<div class="detail">Details about Item 1</div>
<div class="item">Item 2</div>
<div class="detail">Details about Item 2</div>
<div class="item">Item 3</div>
<div class="detail">Details about Item 3</div>
...
.item indicates an item, e.g. FAQ question, and .details indicates the expansion of that item, e.g. the answer to a FAQ question.
Alternatively, you can nest the .details inside of their respective .items.
To add to the jQuery answers...
Wrap what you have in a div with an id of say "FAQ". Wrap the answer in another div so you have something like
<div id="FAQ">
<section>
<summary>Question 1</summary>
<div>
<p>Some Stuff 1</p><p>Some Stuff 2</p>
</div>
</section>
<!-- Repeat as required -->
</div>
Add the following css to hide the answers and make section a block element
#FAQ section>div
{
display:none;
}
#FAQ section
{
display:block;
}
Include the jquery library and then include the following in a script tag
$(document).ready(){
$("#FAQ summary").click(function(){
$(this).next("div").slideToggle('slow');
});
};
See it in action here: http://jsfiddle.net/qu6ef/
This will is a little different from some of the other solutions in that the answer will only be hidden if the question is clicked again. Why stop users from seeing more than one answer at a time? The nice thing about this solution is it is achieved with 5 lines of javascript once you include jQuery
Take some time to look up what I've used with jQuery:
Document Ready
Click Event Listener/Handler
Next - Selects a sibling
Sliding Animation
Related
I'm programming a menu with two checkboxes inside (mat-menu from Angular with native Javascript checkboxes) and if I'm not clicking exactly in the box that doesn't work, the menu is closing and the box not checked ...
By the way with the mat-menu I haven't found how to block the automatic closure of the menu when I click on it.
Do you have a solution ?
Capture of my menu
<!-- app.component.html -->
<div class="header">
<mat-toolbar color="warn">OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
</button>
<button mat-menu-item>
<p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
</button>
</mat-menu>
</div>
</div>
Here is an easy way of extending the checkbox zone using CSS :after pseudo-element:
p, label, button, .chk-extended{
position: relative;
}
/* The above element position will be taken as reference
for the pseudo-element absolute positioning below:
*/
.chk-extended:after,
.chk-over-elm:after{
position: absolute;
content: '';
border: 1px dotted gray; /* For visibility */
/* The below can be adjusted */
top: -0.5em;
bottom: -0.5em;
left: -0.5em;
right: -0.5em;
}
Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>
Note that I used p, label, button as examples in my snippet, but it can work with anything else.
Also, you may need to use !important on the CSS rules to override rules that are already set.
Hope it helps.
I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>
I currently have a HTML page linked with javascript code which allows me to press a button that shows content in a hidden div. The functionality works fine, however when the button is pressed the hidden div displays above the button. Is there anyway it can drop down below the button as opposed to dropping up. Here is the code I am using:
HTML:
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox"></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
<p>6. Run around in the rain<input type="checkbox" ></p>
<p>7. Fly a kte<input type="checkbox" ></p>
<p>8. Catch a fish with a net<input type="checkbox" ></p>
<p>9. Eat an apple straight from a tree<input type="checkbox" ></p>
<p>10. Play conkers<input type="checkbox" ></p>
</div>
<button id="button1" title="Click to show/hide content" type="button1" onclick="readmore1()">Adventurer ▼</button>
<div id="spoiler1" style="display:none">spoiler text</div>
Javascript:
function readmore1(){
var spoiler1 = document.getElementById('spoiler1');
var btn = document.getElementById('button1');
if(spoiler1.style.display=='none') {
spoiler1.style.display = '';
btn.innerHTML = "Adventurer ▲";
} else {
spoiler1.style.display = 'none';
btn.innerHTML = "Adventurer ▼";
}
}
Any help would be much appreciated.
CSS:
#button1 {
display: inline-block;
font: normal 1.5em optima;
line-height: 10px;
margin-left: -10px;
margin-bottom:20px;
width: 250px;
height:60px;
border-radius:8px;
text-align: center;
vertical-align: central;
color: #fff;
border: none;
position: relative;
top: -5px;
left: 30px;
}
Hey mate I've looked at your code more in detail and here is a code example on here, I updated your Javascript to Jquery because its a more powerful language :)
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
$("#spoiler1").show();
});
$("#button").click(function(){
$("#spoiler1").hide();
});
});
</script>
</head>
<body>
<button id="button1" title="Click to show/hide content" type="button1">Adventurer ▼ </button>
<button id="button" title="Click to show/hide content" type="button">Hide</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree
<input type="checkbox">
</p>
<p>2. Roll down a really big hill
<input type="checkbox">
</p>
<p>3. Camp out in the wild
<input type="checkbox">
</p>
<p>4. Build a den
<input type="checkbox">
</p>
<p>5. Skim a stone
<input type="checkbox">
</p>
<p>6. Run around in the rain
<input type="checkbox">
</p>
<p>7. Fly a kte
<input type="checkbox">
</p>
<p>8. Catch a fish with a net
<input type="checkbox">
</p>
<p>9. Eat an apple straight from a tree
<input type="checkbox">
</p>
<p>10. Play conkers
<input type="checkbox">
</p>
</div>
</body>
</html>
Z-index should sort it in the CSS
an example of how to use it below, I hope this helps :)
Here is a code example, I would use 999999 :p thats just an example of how you would do it
http://www.w3schools.com/cssref/pr_pos_z-index.asp
#YourDiv {
Z-Index: 999999
}
#YourButton {
Z-Index:-999999
}
I usually use CSS for this sort of effects. All you need is "input[type='checkbox']" and label.
test.html
<link rel="stylesheet" type="text/css" href="test.css"/>
<input type="checkobx" id="toggleCheck"/>
<label for="toggleCheck">Label for button</label>
<div class="hiddenContent">
<p>Yours hidden stuff goes here</p>
</div>
test.css
#toggleCheck{ display: none;}
label[for='toggleCheck']{
padding: 5px 10px;
background: green;
border-radius: 4px;
box-shadow: 1px 1px 2px black;
}
.hiddenContent{
display: none;
}
#toggleCheck:checked + label{
/* Styles for button in opened state*/
box-shadow: 0px 0px 2px black;
}
#toggleCheck:checked + label + .hiddenContent{
display: block;
}
With this technique you separate your logic from your views. IMHO, using JS for simple things like that leads to dark side.
I'm trying to make a survey webapp on heroku (javascript mostly) and the off-center text on these radio buttons is rather annoying. What's an easy way to center it and slide it off to the side a little? Formatting is all done with CSS right now. Currently how I'm formatting these radio inputs is as so....
.radio-input{
background: #D4E7ED;
padding:20px 10px;
}
You can use vertical-align: middle on label and radio button with padding-top: 1% on label for aligning text and radio button:
label {
vertical-align: middle;
padding-top: 1%;
}
.rdo{
vertical-align:middle;
}
DEMO
Here's an example I created using a similar approach that Coder outlined. It includes the background coloring you specified and it wraps the radio button and text in divs. It seemed to behave pretty well for me:
the css:
.radio-input {
padding-top:20px;
vertical-align:top;
}
.radio-input-text {
vertical-align:bottom;
}
.background {
background: #D4E7ED;
width:300px;
}
the HTML:
<div class="background">
<div class="radio-input">
<input type="radio" value="Great" id="Great" /><span class="radio-input-text">Great</span>
</div>
<div class="radio-input">
<input type="radio" value="Okay" id="Okay" /><span class="radio-input">Okay</span>
</div>
<div class="radio-input">
<input type="radio" value="Very Bad" id="VeryBad" /><span class="radio-input">Very Bad</span>
</div>
</div>
Demo
For future reference here is the final result with pixel perfect precision:
The CSS code:
._25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
width: 100%;
}
input {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
textarea {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
select {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
And some sample HTML code:
<div class="_50">
<p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>
<div class="_50">
<p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>
Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but I'm having a really hard time making forms with columns, take the following example:
div (width = 400px)
form
ul
li .half
label
input (should be 200px wide)
li .half
another label
another input (should also be 200px wide)
Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of borders, margins and paddings.
Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.
EDIT: Wufoo has some examples of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.
First off, do not use a table. Putting form elements in a table does not solve your problem and complicates your maintenance. Using tables to supplement form presentation is a sign of incompetence and complexity. It is also entirely non-semantic. Instead you might actually have to write some CSS. Honestly, if you are going to use tables for non-tabular data then don't even bother using CSS as that multiplies the complexity of maintenance.
Here are some things to keep in mind:
1) Define all your units in "em" units. Most form elements are intended to contain text. Those elements, like text fields and textarea blocks, can be increased and decreased as a feature of accessibility. This means your pixel perfect pretty CSS grid will break the moment a user changes text size on the page.
2) Don't wrap your form element in a div. Like a div, your form is a block level element. Unless the form has peer nodes under a div parent simply direct any presentation directly to the form element and not a parent element that exists only to contain the form.
3) Group your form elements. If you are floating text fields things can get all messed up if the forms are floated independently of their respective label elements. It will be easier to put an ordered list inside your form and then wrap each form element in a list item. This way you only have to worry about defining layout of the label element relative to its form control and then layout of them together by defining presentation of the list item. This method is also semantic and informs text readers of an order upon your form controls.
4) Don't use the !important declaration. This makes for a quick fix in your CSS but completely screws up inheritance and absolutely complicates maintenance. Instead take the extra time to write your code correctly the first time, so that future maintenance is a quick and minor event.
5) Don't use position absolute, unless you really know what you are doing, even if your form is set to position relative. Position absolute results in unexpected behaviors in many cases and unexpected problems.
6) To ensure your CSS code actually defines a true grid use the Firefox MeasureIt plug in. It will help you achieve stunning accuracy and save you incredible time when making your grid.
7) Do everything correctly the first time using as little code as necessary to get the job complete and present your form perfectly. Only then test your form for cross browser accuracy. Make one correction for cross browser accuracy at a time to limit unnecessary bloating to your CSS code.
Something like this may help. This is how I did it on a form.
It will take some fine tuning though to make it work at your desired width. This might help you get started though.
The CSS:
.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}
The HTML:
<form action="/contact-us" method="post" class="contact">
<ul>
<li>
<div class="half">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="input" />
</div>
</li>
<li>
<label for="address">Address:</label>
<input type="text" id="address" name="address" class="input" />
</li>
<li>
<div class="third">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="input" />
</div>
<div class="third">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="input" />
</div>
<div class="third omega">
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" class="input" />
</div>
</li>
</ul>
</form>
Here's a basic kickoff example which may be of use:
<!doctype html>
<html lang="en">
<head>
<style>
fieldset { width: 400px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
</style>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
Note that I am using left-floated div's of half-width instead of unordered list items.
As you insist in using percentages, don't expect it to be pixelperfect in all browsers. If you want to have it all pixelperfect, you really need to use pixels.
I think this is what you are looking for:
http://www.alistapart.com/articles/prettyaccessibleforms/
It should help simplify your structure a little bit. It doesn't explicitly describe how to make multiple column forms, but the technique could probably expand to that with some creativity on your part.
No need for the fluid 960 system here, unless you want the form to expand and contract with the browser.
I would recommend the regular old 960 grid system for this. 960 width is great for grids because it divides evenly by 12 and 16 which allows you to set up pixel perfect three and four column layouts.
The best way to get familiar with the 960 grid system is to look at the souce css and the source of the html demo
<div class="grid_6">
<p>
contact form
</p>
</div>
<div class="grid_3">
<p>
name
</p>
</div>
I had to do something similar and ended up setting my half-columns to 46%. It leaves an extra bit of room for the padding and gets all your input fields consistently sized.
One answer is Blueprint. I have read where you don't think it's the answer, but it's still the way I would do it. All the ease of tables with all the power of CSS.
With blueprint the math is pretty easy. Let's say your form spans 10 columns.
<div id="contact-form" class="span-10">
<h3>Contact Form</h3>
<form action="contact">
<div id="form-sec-1" class="span-5">
<label>Name</label> <br/>
<input type="text" name="name" /> <br/>
<label>ZIP code</label> <br/>
<input type="text" name="zipcode" />
</div>
<div id="form-sec-2" class="span-5 last">
<label>Email</label> <br/>
<input type="text" name="email" /> <br/>
<label>Country</label> <br/>
<input type="text" name="country" />
</div>
<div id="form-sec-3" class="span-10 last">
<label>Message</label> <br/>
<textarea name="message" />
</div>
<div id="form-sec-4" class="span-8">
<input type="checkbox" name="copy"/>
<label>Send me a copy</label>
</div>
<div id="form-sec-5" class="span-2">
<input type="submit"/>
</div>
</form>
</div>
Oh wow,i was just thinking what in the world is the matter with the css world then i saw this css grid layout editors draft,http://dev.w3.org/csswg/css3-grid-align/
I still cannot explain why the css world hasn't really been thinking along such lines,what explanation can there be for the lack of such a feature in css.