I am creating a checkout page and I am structuring it so it is three steps.
Shipping info
Payment
Order confirmation
I am wanting to create this so they sequentially display with only one displaying one at a time. What I have created so far is using the toggle method approach and it somewhat does what I want with making the divs show and hide, but I am wanting this in a more sequential manner, meaning they can't get to step two without completing step 1.
The toggle approach is also an issue in the regards that if I hit button 2, I have hit that button again for it to go away.
Also with toggle approach I created, the shippinginfocontainer (Shipping Info), it never goes away. It always displays. I tried adding display: none to the CSS portion of it, but then it never displays.
The toggle approach is working and is not broken. I am looking for other solutions to possibly add to this to gain the desired effect of making this sequential and not having to "untoggle" a div.
Also I am unable to get the 1st div container (shipping info) to disappear when going to a different div.
$( '#button1' ).click(function() {
$( '.shippinginfocontainer. ).toggle( "slow" );
});
$( '#button2' ).click(function() {
$('.paymentinfocontainer' ).toggle( "slow" );
});
$( '#button3' ).click(function() {
$( '.confirmationinfocontainer' ).toggle( "slow" );
});
The jsfiddle still doesn't display how I created it. It is only my second time using it...sorry. I just thought it would be an easier way to read the code.
Fiddle
Edited...
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide1").click(function(){
$("#p1").show();
$("#p2").hide();
$("#p3").hide();
});
$("#hide2").click(function(){
$("#p1").hide();
$("#p2").show();
$("#p3").hide();
});
$("#hide3").click(function(){
$("#p1").hide();
$("#p2").hide();
$("#p3").show();
});
});
</script>
</head>
<body>
<p id="p1">Hey there, its me urs truly p1.</p>
<p id="p2">Hey there, its me urs truly p2.</p>
<p id="p3">Hey there, its me urs truly p3.</p>
<button id="hide1">Button1</button>
<button id="hide2">Button2</button>
<button id="hide3">Button3</button>
</body>
</html>
i have updated your code on jsfiddle kindly check it.
$(function(){
$( '#button1' ).click(function() {
$( '.shippinginfocontainer' ).toggle( "slow" );
});
$( '#button2' ).click(function() {
$('.paymentinfocontainer' ).toggle( "slow" );
});
$( '#button3' ).click(function() {
$( '.confirmationinfocontainer' ).toggle( "slow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="spancenter"><p>Easy three step ordering process</p></span>
<ul class="checkoutmenu">
<button class="checkoutbutton" id="button1">1. Shipping Information</button>
<button class="checkoutbutton" id="button2">2. Payment Information</button>
<button class="checkoutbutton" id="button3">3. Order Confirmation</button>
</ul>
<div class="shippinginfocontainer">HELLO DUMMY</div>
<div class="paymentinfocontainer">HELLO DUMMY</div>
<div class="confirmationinfocontainer">HELLO DUMMY</div>
Regards
Try this code ::
$('#button1').click(function(){
$(".paymentinfocontainer, .confirmationinfocontainer").hide("slow");
$(".shippinginfocontainer").show("slow");
});
$('#button2').click(function(){
$(".shippinginfocontainer, .confirmationinfocontainer").hide("slow");
$(".paymentinfocontainer").show("slow");
});
$('#button3').click(function(){
$(".paymentinfocontainer, .shippinginfocontainer").hide("slow");
$(".confirmationinfocontainer").show("slow");
});
CHECK FIDDLE HERE
OR
Try it also : Tested working successfully
<button class="checkoutbutton" onclick="showhide('shippinginfocontainer');" id="button1">1. Shipping Information</button>
<button onclick="showhide('paymentinfocontainer');" class="checkoutbutton" id="button2">2. Payment Information</button>
<button onclick="showhide('confirmationinfocontainer');" class="checkoutbutton" id="button3">3. Order Confirmation</button>
function showhide(show) {
var y = ['shippinginfocontainer','paymentinfocontainer','confirmationinfocontainer'];
y.splice( $.inArray(show, y), 1 );
for(var i=0;i<=y.length;i++) {
$("."+y[i]).hide("slow");
}
$("."+show).show("slow");
}
Related
I am creating big form and would provide button navigation between sections for accessibility.
It means that you could expand/collapse next or previous section by buttons navigation.
However, when you switch section, current section is hidden (and next one is showed) by display CSS property, so just used button is anymore focused as it's not visible.
Take a look on this JSFiddle or code below to understand issue.
HTML:
An anchor
<article>
<header>First box</header>
<main>
This is first box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Second box</header>
<main>
This is second box.
<button class="focusable">Extra button</button>
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Third box</header>
<main>
This is third box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
</main>
</article>
An anchor
CSS:
.box-hidden main {
display: none;
}
/* Only cosmetic below */
article { background: #ddd; margin: 10px 0; }
header { background: #ccc; }
button:focus { outline: 2px solid blue; }
JQuery:
$( 'body' ).on('click', '.next', function( event ) {
event.preventDefault();
var next = $( this ).closest( 'article' ).next( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( next ).removeClass( 'box-hidden' );
});
$( 'body' ).on('click', '.prev', function( event ) {
event.preventDefault();
var prev = $( this ).closest( 'article' ).prev( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( prev ).removeClass( 'box-hidden' );
});
When you use next or previous button, focus is lost and you have to start again from page begin. It can't happen.
My solution is to find closest focusable (it sucks, because I use class due first focusable could be input either another button) in opened section and focus it:
JSFiddle or add to JQuery:
$( next ).find( '.focusable' )[0].focus();
At end of both functions, analogously replace $( next ) to $( prev ) in second one.
So it will look like:
//[...]
$( next ).removeClass( 'box-hidden' );
$( next ).find( '.focusable' )[0].focus();
});
But I am not sure is it right way, isn't it confuse user navigating by focusable elements?
Maybe I should do it another way?
Note: Buttons are appended by JS, so non-JS users just dont't use them.
Thanks in advance for advices!
I believe you have uncovered a usability issue, not an accessibility issue. I would replace the next and previous buttons with expand/collapse toggles for these sections. This would immediately solve your accessibility issue (because these buttons would always be visible) and it would be a UI model that users are familiar with and solve (what I believe to be) a non-standard and confusing interaction model.
Here is your JSfiddle updated for this implementation (you can probably find better icons than I used) http://jsfiddle.net/zwLLrg9d/7/
I also changed this so that there is correct use of sectioning content. Multiple instances of a <header> element are definitely not recommended.
I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?
I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}
I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.
1.This is my code here i have a div class inner which is dynamically loaded using ajax call
and after ajax call if i click the hide button it is not working.
But its working perfectly before ajax request.
so in order to overcome i just add a outer div and hide that div this time it works..
I don't know why?
$( "#inner" ).replaceWith( data ); /*and*/ $( "#inner" ).hide(); //not working
$( "#inner" ).replaceWith( data ); /*and*/ $( "#outer" ).hide(); //working
Why we cant use the same div class ?
<html>
<div id="outer">
<div id="inner">
<br /> <br /> <br />
<div> <input type="button" value="signup" onclick="changeval();"/>
</div>
<br /> <br />
</div>
</div>
<input type="button" value="hide" onclick="onhide();"/>
<script language="javascript">
function changeval(context)
{
var typeval="sdsf";
var url="sdfsdf";
$.ajax({
type:'POST',
url:'htp://sscs/registration',
data:'&typeval='+typeval+'&url='+url,
success:function(data) {
$( "#inner" ).replaceWith( data );
}
});
}
function onhide()
{
$( "#inner" ).hide();
}
</script>
Use .html()
$("#inner").html(data);
instead of .replaceWith() as
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
DEMO of replaceWith, Here you can see div with second class is replace with input content.
It doesn't work because you replace the <div id="inner">.
Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.
Use like this:
$( "#inner" ).replaceWith( function(){
return $(this).data();
} );
After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .
You could use $("#inner").html(data); to keep the div and then hide it once you received the response.
I have very basic problem, actually it's look Here. I want to separate two buttons.
jQuery
$( "span" ).click(function() {
$( "p" ).toggle( "slow" );
});
HTML
<span>↓ Hobby </span>
<p class="contentDiv" >Such interesting text, eh?</p>
<br> <br>
<span>↓ Sport </span>
<p class="contentDiv" >Such interesting text, eh?</p>
I was trying by getElementById but it doesn't work.
I'm beginner, be patient.
When you are using $('p') you are selecting all p elements, you need to specify like this
$( "span" ).click(function() {
$(this).next().toggle();
});
Try this.
$( "span" ).click(function() {
$(this).closest('p').toggle();
});