I Wrote this JQuery code but I thought the questions (#question1 and #question2) would be hidden when they are clicked and #answer1 and 2 would be revealed. Hence 'toggle()' Does anyone have a suggestion of the best way I could do this so that neither is visible at the same time - if the question is clicked then the answer is revealed and the question is not displayed. I am not bothered about it going back (e.g when the answer is clicked it swaps again)
$(function(){
$('#question1').live('click',function(){
event.preventDefault();
$('#answer1').toggle();
});
});
$(function(){
$('#question2').live('click',function(){
event.preventDefault();
$('#answer2').toggle();
});
});
You can try this code which will work with any number of questions :
HTML:
<div class="question-container" id="question1">
<p class="question">The question 1 </p>
<p class="answer hide">The anwser 1</p>
</div>
<div class="question-container" id="question2">
<p class="question">The question 2</p>
<p class="answer hide">The anwser 2</p>
</div>
CSS :
.hide {
display: none;
}
JS :
$(function(){
$('.question-container').on('click',function(pEvent){
$(this).children('.answer').toggleClass('hide');
$(this).children('.question').toggleClass('hide');
});
});
Demo : http://jsfiddle.net/kyo9jahw/3/
Related
I have this small piece of code
HTML
<div class="select">
<p></p>
</div>
<div class="option">
<p class="active">text</p>
</div>
JS
$('.option p').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
if ($('.option p.active').length == 0) {
$('.select p').text('some text');
}
}
})
If I run this code in the chrome console, it works perfectly. But if I run it in my programme, it doesn't work (the .select p text is not changed). I tried putting an alert() after text() to see if it would execute, and apparently alert() is executed, so text() should also be executed. I don't understand why it is not being executed in my programme (it was working perfectly a few weeks ago)
You need to put the code inside a click handler. When you click on an element, do different things depending on whether you clicked on the active or inactive element.
If it's active, remove the class and put the default text in the select paragraph.
If it's not active, remove the class from all the other elements and add the class to this element, and display its text in the select paragraph.
$(".option p").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(".select p").text("No option selected");
} else {
$(".option p").removeClass("active");
$(this).addClass("active");
$(".select p").text($(this).text());
}
});
.option p.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">
<p>text 1</p>
</div>
<div class="option">
<p class="active">text 1</p>
</div>
<div class="option">
<p>text 2</p>
</div>
<div class="option">
<p>text 3</p>
</div>
I am trying to make an online questionnaire that will only show the next question after answering the current question. I am very new at this and trying to learn as I go. How do I make the 2nd set of buttons appear only when you answer yes to question 1?
<html>
Question 1
<p>
<button onclick="myFunction1()">Yes</button>
<script>
function myFunction1() {
document.getElementById("demo").innerHTML = "Yes on question 1, display question 2";document.getElementById("demo").style.color = "black";}
</script>
<button onclick="myFunction2()">No</button>
<script>
function myFunction2() { document.getElementById("demo").innerHTML ="No on question 1 negative answer to question 1 display negative response";document.getElementById("demo").style.color = "red";}
</script>
</html>
<p id="demo"></p>
</script>
</p></p></p>
</html>
<head>
<script>
function showImg() {
document.getElementById("map_img").style.display = "";
}
</script>
</head>
<body>
<button onclick="myFunction3()">Yes</button>
<script>
function myFunction3() { document.getElementById("demo2").innerHTML = "Yes to question 2";}</script>
</html>
<button onclick="myFunction4()">No</button>
<script>
function myFunction4() {
document.getElementById("demo2").innerHTML = "No to question 2";}
</script>
</body>
<p id="demo2"></p>
Use css display: none; to hide the second question, then when the user clicks the yes button, you change it to display:block;
Here is an example: https://jsfiddle.net/mrpbtbgy/2/
document.querySelector("#q1Btn").addEventListener("click",()=>{
document.querySelector("#question2").style.display="block";
});
In my opinion, you have to put your second, third and ... questions into div's tags with style="display:none"
When the users click on the Yes button, you can easily change the display to block and show the next question.
Another thing is that your html is not formatted well.
Here is an example of html.
<html>
<head>
</head>
<body>
<div>Your first question</div>
<div style="display:none" id="question2">Your second question</div>
<script>
You can put all your functions here
</script>
</body>
</html>
I did a very simple example for you, you can check on the following link:
https://jsfiddle.net/L7gp4c5g/
Hope to help you!
Put the what you want to hide in a div hidden:
<div id="question2" style="visibility: hidden">
<button onclick="onClick(2)">Yes</button>
<button onclick="onClick(2)">no</button>
</div>
Use javascript to programmatically hide or show next div:
<script>
function onClick(button) {
document.getElementById('question' + (button + 1)).style.visibility = "visible"
}
</script>
As other I would have said :
If you want to get the results at the end of all the questions. (if user leave, you won't get nothing.)
A solution would be to put each question in hidden divs, on the same page, displaying them after each validation. This way you won't need to put and remove content. Example:
function showquestion(number){
$("#question"+number).removeClass("hidden"); // Show the next question
$("#question"+(number-1)).addClass("hidden"); // Hide the current question
}
.hidden{display:none;
visibility : hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question1" class=""> Mauvaise réponse</div>
<div id="question1" class=""> Question 1 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(2)">No</button></div>
<div id="question2" class="hidden"> Question 2 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(3)">no</button></div>
<div id="question3" class="hidden"> Question 3 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(4)">no</button></div>
But we forgot the "yes / no" part, nor talk about the visibility of the question solution inside the source code.
The correct way of doing this would be an ajax call on each question validation : The user send the response to a php script, this script validate the response, or not, then send the content that will be inserted on the user page.
It's the only way for the user don't cheat, and it allow you to save his response on each step (if you save something).
I am not sure why but after looking at examples I thought were the same from previous questions I decided to post.. I have a button when clicked does the following things...
$('.fa-phone, .bg-darkPink').parent().on('click', function () {
$('#testimonials').fadeTo(0, 0);
$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBigCS");
$(".musability-music-therapy-content-space").css({width: "720px",opacity:1}).load("contact-page.html #contact-form");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$.getScript("js/slider/slider-animations.js");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$('#menu').multilevelpushmenu('collapse');
$('.submenu-ctn').fadeTo(3000, 1);
});
the problem is that this bit of the script is not getting executed.
$('#testimonials').fadeTo(0, 0);
where the css and html is as follows
<div id="testimonials">
<div class="box animated seven boxGreen testimonials1">
<p class="fg-white">"".<p class="text-small fg-white">- M
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
<div class="box animated nine boxGreen testimonials2">
<p class="fg-white">" the long term"<p class="text-small fg-white">kool.
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
</div>
#testimonials
{
display:block;
opacity:1;
z-index:1500;
}
Not really sure what's going on so investigating with debug but that isn't telling anything atm. works in all other browsers hmmmm ?
So basically I.E 10 doesn't like classes that have overflow:hidden within a div you are trying to fadeTo ... taking them out of the classes within the div sorted the problem out !
I may be close but since apparently nobody asked something like this, perhaps I may ask with the wrong wording.
I have a tabber with categorys which are dynamic and fancy box-galleys which also have dynamic attributes (shown here as divs with the attribute lala="xyz"). So how can I show on click on the tabber (here as first and last buttons) only the matching gallerys (in my code the first two or the last two divs should diapear)?
NOTE: the attributes are not predictable.
My html:
<div class="wrap">
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 1</p>
</div>
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 2</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 3</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 4</p>
</div>
</div>
<div class="showall">Show all</div>
<br>
<div class="mybutton" lala="ui">SHOW ONLY UI</div>
<div class="mybutton" lala="uibui">SHOW ONLY UIBUI</div>
And my jquery:
jQuery(function ($) {
$('.showall').click(function() {
$('.box').show();
});
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not([myattr = "lala"]).hide();
});
});
Thanks in advance!
Inject your attribute into a attribute selector so that the end result looks like
not('[lala="uibui"]')
e.g.
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not('[lala="' + myattr + '"]').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/
It can be simplified to just
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$('.box:not([lala="' + myattr + '"])').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/2/
Or even down to this (but now less readable):
$('.mybutton').click(function () {
$('.box:not([lala="' + $(this).attr('lala') + '"])').hide();
});
Try this:
$(".box").not('[lala = "'+myattr+'"]').hide();
Please check out my HTML markup:
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[1] only works for .para[1]-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[2] only works for .para[2]-->
When .btn[0] gets clicked then .para[0] should be display:block, but all other para[1], para[2] , ...., para[n] will be display:none.
How can I achieve this in JavaScript or JQuery (without adding unique id's)?
You can hide all the .para by default using css:
.para {
display: none
}
and using below code to show the expected paragraph as well as hiding other paragraphs
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
Fiddle Demo
try this
$(document).ready(function(){
$('.para').hide();
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
});
See FIDDLE