I want a div to become visible when its corresponding select option is clicked (and to hide others) unfortunately my attempts at JavaScript are terrible.
CSS
#aaa, #bbb, #ccc {
display:none;
}
The HTML (I use the same id name for option and div - is this incorrect?)
<select>
<option>Select</option>
<option id="aaa" value="aaa" onclick="showExtra(this)">AAA</option>
<option id="bbb" value="bbb" onclick="showExtra(this)">BBB</option>
<option id="ccc" value="ccc" onclick="showExtra(this)">CCC</option>
</select>
<div id="aaa">
<p>AAA is aaamazing</p>
</div>
<div id="bbb">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc">
<p>cccor blimey CCC</p>
</div>
The JavaScript
function showExtra(element)
{
I don't have clue .slideToggle("medium");
}
Get rid of the IDs in the <option> elements, they're not needed (or if they are, you need to rename them, e.g. optaaa, so they don't conflict with the IDs of the DIVs). Also, call the function from the dropdown's onchange event, not clicking on the options.
<select onchange="showExtra(this)">
<option>Select</option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>
Give all your DIVs a class, so you can operate on them as a group:
<div id="aaa" class="tab">
<p>AAA is aaamazing</p>
</div>
<div id="bbb" class="tab">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc" class="tab">
<p>cccor blimey CCC</p>
</div>
In the JS, you can then operate on all the DIVs that do or don't match the value.
function showExtra(option) {
var divID = option.value;
$(".tab:not(#"+divID+")").slideUp();
$(".tab#"+divID).slideDown();
}
DEMO
Related
Looking for some jQuery to help hide and reveal content in a simple form I'm creating.
Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).
I think data attributes would be a good route to go down but a little unsure of where to start.
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I highly recommend reading Decoupling Your HTML, CSS, and JavaScript. You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.
$(document).ready(()=>{
$('.js-revealer').on('change', function(){
var $select = $(this);
var $selected = $select.find('option:selected');
var hideSelector = $selected.data('r-hide-target');
var showSelector = $selected.data('r-show-target');
$(hideSelector).addClass('is-hidden');
$(showSelector).removeClass('is-hidden');
});
});
.is-hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box" class="js-revealer">
<option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
<option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
<option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
<option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
</select>
</div>
<div data-response="op1" class="opt-1 is-hidden">
This is content for option 1.
</div>
<div data-response="op2" class="opt-2 is-hidden">
This is content for option 2.
</div>
<div data-response="op3" class="opt-3 is-hidden">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="opt-other is-hidden">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:
$('#select-box').change(function(){
var selectVal = $(this).val();
$('.content, #other-questions').hide();
$('.content[data-response="op' + selectVal + '"], #other-questions').show();
});
.content, #other-questions {
display: none;
}
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="content" data-response="op1">
This is content for option 1.
</div>
<div class="content" data-response="op2">
This is content for option 2.
</div>
<div class="content" data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I've updated my answer to include classes which are better for selecting elements than data attributes.
I would suggest using classes for this, there is no need for data attributes.
$(function() {
$('#select-box').change(function(){
if($('#select-box').val() == '1') {
$('.response1').show();
$('.response2').hide();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '2') {
$('.response1').hide();
$('.response2').show();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '3') {
$('.response1').hide();
$('.response2').hide();
$('.response3').show();
$('#content').show();
}
});
});
.response1, .response2, .response3 {
display: none;
}
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class='response1' data-response="op1">
This is content for option 1.
</div>
<div class='response2' data-response="op2">
This is content for option 2.
</div>
<div class='response3' data-response="op3">
This is content for option 3.
</div>
</div>
<div id='content' data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide
to hide the element and show to show the element.
$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
var value = $(this).val();
if(value !="" && value<=3 && value !=0){
console.clear();// to clear older logs.
console.log('Selected value'+$(this).val());
$('[data-response^=op]').attr('class',"hide");//On change hide all div's
var selector = "op"+value;
$(document).find("[data-response='"+selector+"']").attr('class',"show");
$("#other-questions").attr('class',"show");//Show matching div.
}else{
$("#other-questions").attr('class',"hide");
$('[data-response^=op]').attr('class',"hide");
}
})
.hide{
display:none;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="hide">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I'm attempting to show/hide <div>'s based on values chosen from a select drop-down menu.
HTML
<select id="selReport">
<option value="Report One">Report One</option>
<option value="Report Two">Report Two</option>
<option value="Report Three">Report Three</option>
<option value="Report Four">Report Four</option>
</select
<div id="Report One" class="description">
<p>...</p>
</div>
<div id="Report Two" class="description">
<p>...</p>
</div>
I'm using the following jQuery snippet to hide the <div>'s and then show them based on what is selected in the drop-down menu:
jQuery
$('.description').hide();
$('#selReport').change(function () {
$('description').hide()
$("[id='" + this.value + "'").show();
});
When a new option is selected from the drop-down menu the previous <div> that was displayed doesn't hide. It stays displayed and I don't know why. Can someone offer a suggestion?
First change your ids to dont have any spaces (space is an invalid character for IDs) like follows:
<div id="Report-One" class="description">
<p>...</p>
</div>
<div id="Report-Two" class="description">
<p>...</p>
</div>
And second (little typo here :)) change:
$('description').hide();
to:
$('.description').hide();
You have to change
$('description').hide() // tag selector
by
$('.description').hide() // class selector
Your code as it is, selects elements with tag description what is not what you're looking for
EDIT
Missed the Id thing (credit to #taxicala). Definitively you need to change your ids.
<select id="selReport">
<option value="ReportOne">Report One</option>
<option value="ReportTwo">Report Two</option>
<option value="ReportThree">Report Three</option>
<option value="ReportFour">Report Four</option>
</select
<div id="ReportOne" class="description">
<p>...</p>
</div>
<div id="ReportTwo" class="description">
<p>...</p>
</div>
So I wasn't sure how to word this, but I want to create a multi-step form that asks the user a few questions, then based on what they choose, shows different code. I made a simple jsfiddle to explain. When they choose their answer, it will automatically fade into the next question or display a set of code, like an image. Also, having it work with radio buttons.
What is this called and will I need javascript to accomplish it?
<select>
<option>Select Color</option>
<option>Green</option>
<option>Blue</option>
<option>Red</option>
<option>Orange</option>
</select>
A few pointers:
jsFiddle Demo
(1) I used position:absolute so all DIVs would be located on top of each other. See here for more info about absolute/relative/fixed/static positioning
(2) Use the change() event to detect when the SELECT value has changed
(3) fadeOut ALL DIVs with class="ques", then fadeIn the one that you wish to display next
(4) Each DIV and each SELECT have a unique, numbered ID attribute. We get the number of the SELECT that just changed, turn that ID from a string into an integer, and add one. Now we know which DIV to fadeIn()
(5) The initial $('#q1').show(); just displays the first question, to get things started, because in the CSS we used .ques{display:none;} to hide all the questions, including the first one.
jsFiddle Demo
HTML:
<div id="bubble">
<div id="contain">
<div id="q1" class="ques">
<p>Which is your favorite color?</p>
<select id="q-1">
<option>Select Color</option>
<option>Blue</option>
<option>Red</option>
<option>Green</option>
<option>Orange</option>
</select>
</div><!-- #q1 -->
<div id="q2" class="ques">
<p>Which is your favorite car?</p>
<select id="q-2">
<option>Select Car</option>
<option>Ford</option>
<option>Chev</option>
<option>Kia</option>
<option>Peugot</option>
</select>
</div><!-- #q2 -->
</div><!-- #contain -->
</div><!-- #bubble -->
jQuery:
$('#q1').show();
$('select').change(function(){
$('.ques').fadeOut(800);
var num = $(this).attr('id').split('-')[1];
var nxt = parseInt(num) + 1;
$('#q'+nxt).fadeIn(800);
});
EDIT:
Thanks a lot. Is it possible to show a different select if they choose green instead of red?
$('select').change(function(){
$('.ques').fadeOut(800);
var ans = $(this).val();
if (ans == 'Green'){
$('#q15').fadeIn(800);
}else if (ans == 'Red'){
$('#q12').fadeIn(800);
}
});
Revised jsFiddle
You will need javascript to accomplish this. I have added a fiddle to explain how it can be done.
Check the fiddle using the following url : http://jsfiddle.net/hec4otv3/17/
HTML Code:
<div id="step1">
<div class="bubble">
<div class="contain">
<p>Which is your favorite color?</p>
<select id='color'>
<option value="">Select Color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
after selecting answer, it should fade into a new question/code.
</div>
<div id="blue-step" class="hide">
<div class="bubble">
<div class="contain">
<p>Which is your favorite sub-color?</p>
<select id='color'>
<option>Select Color</option>
<option>dark Blue</option>
<option>light blue</option>
<option>sky blue</option>
<option>navy blue</option>
</select>
</div>
</div>
</div>
<div id="red-step" class="hide">
you choose red
</div>
<div id="green-step" class="hide">
you choose green
</div>
<div id="orange-step" class="hide">
you choose orange
</div>
Javascript:
window.shownextstep=function(){
var txt=document.getElementById('color').value;
document.getElementById('step1').style.display='none';
document.getElementById(txt+"-step").style.display='block';
}
var e=document.getElementById('color');
e.onchange=shownextstep;
CSS:
.bubble {
width:220px;
height:150px;
background:url("http://i.imgur.com/MBRmEEf.png")no-repeat;
background-position:center;
background-size:200px;
}
.contain {
padding: 10px 0 0 30px;
}
select {
margin-left:10px;
}
.hide{
display:none
}
Sounds like you should use JQuery animate http://api.jquery.com/animate/. To get the fade effect one of the properties you'll want to use is opacity. You might also want to use some easing in and out. You can then call the complete() function to load the next question.
yo can try this checking the value via jQuery. Instead of alert you can give jquery any command you like.
$(document).ready(function(){
$('select').change(function(){
var selectVal = $(this).find(':selected').val();
if(selectVal == 'Green'){
alert(selectVal);
}
else if(selectVal == 'Blue'){
alert(selectVal)
}
else if(selectVal == 'Red'){
alert(selectVal)
}
else {
alert(selectVal)
}
});
});
http://jsfiddle.net/hmd0t5u5/1/
Here you have a full working simple three steps example, with no need to jQuery.
You just need to define the submit_form() function. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
function submit_form() {
var sum = parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("Your result is: " + sum);
}
<body onload="shows_form_part(1)">
<form>
<div id="form_part1">
Part 1<br>
<select id="num1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<!--form elements 1-->
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<!--form elements 2-->
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<!--form elements 3-->
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="submit_form()">Sum</button>
</div>
</form>
</body>
What is the best way to add another class to this script:
<script type="text/javascript">
$(document).ready(function(){
$('.carlocation').hide();
$('#parking-options').change(function() {
$('.carlocation').hide();
$('#' + $(this).val()).show();
});
});
</script>
I am fine with the same ID displaying this classes, I am just unsure about how to add another class to this script. As '.carlocation' , '.insertclass' or '.carlocation .insertclass' does nothing but break the script.
Thanks!
EDIT - The rest of the markup.
I would like .carlocation and .car-position to start off as two hidden divs but in the first drop down when "Self parking" is selected that the other two selections display.
<li>
<label for="select-choice-0" class="select">Parking Method:</label>
<select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Select One</option>
<option value="self">Self Parking</option>
<option value="auto">Valet Parking</option>
</select>
</li>
<li>
<div id="self" class="carlocation">
<h1>Enter Car Location:</h1>
<label for="select-choice-0" class="select">Floor:</label>
<select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Floor Select</option>
<option value="f1">F1</option>
<option value="f2">F2</option>
<option value="f3">F3</option>
<option value="f4">F4</option>
</select>
</div>
</li>
<li>
<div id="self" class="car-position">
<label for="select-choice-0" class="select">Row:</label>
<select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Row Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<li>
Hide your elements with CSS:
.carlocation, .car-position {
display: none;
}
Remove the repeated "self" id from both of the divs, and instead add the "self" value to the class attribute on both:
<li>
<div class="self carlocation">
<!-- ... -->
</div>
</li>
<li>
<div class="self car-position">
<!-- ... -->
</div>
</li>
Side Note: Your second div was missing its closing tag.
Then bind to the change event of the form:
$("#parking-options").on("change", function(){
$("div.self").toggle( $(this).val() === "self" );
});
This bases the visibility of all .self divs on the value of the select being "self". If "self" is selected, all div.self items will become visible. Otherwise, they become hidden.
Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/
Or you could slide them into view:
$("#parking-options").on("change", function(){
$(this).val() === "self"
? $("div.self").slideDown()
: $("div.self").slideUp();
});
Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/2/
To select multiple selectors try this-
$("selector1,selector2")
It will definetly work.
For more information visit jQuery selectors reference.
Your jQuery selector can interact with multiple classes (or any other elements) by making a comma separated list within the quotes of the selector, in other words:
$('.carlocation, .insertclass, .anotherclass').hide();
Edit: Note that case sensitivity can be an issue in some cases, so '.insertclass' is not always the same as '.insertClass' - see JQuery class selectors like $(.someClass) are case sensitive? for more.
It looks like you might have gotten hung up initially by not having all of your selectors in the same quotes. Having a space between classes as in '.carlocation .insertclass' is actually saying "select an element with the class "insertclass" that is a child of an element with class "carlocation"
If you are going to be interacting with the same set of elements more than once, you can optimize your code by assinging them to a variable:
var $myselection = $('.carlocation, .insertclass, .anotherclass');
(note that putting the '$' in the variable name just helps remind you that it's a jQuery object, you could name it whatever you want).
You can now use any of the normal jQuery methods on $myselection:
$myselection.hide();
$myselection.show();
or use it later (so long as the variable is accessible within the scope that you're looking for it, which wouldn't be a problem in your initial example).
I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)