Simply function to separte buttons - javascript

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();
});

Related

Loop using jquery and javascript

I'm having some trouble thinking of how to do this properly.
Right now, I have some jquery that looks like this:
$( "#person_0" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_0" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_0" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_0" ).show();
});
$( "#person_1" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_1" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_1" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_1" ).show();
});
...
...
Essentially, if you click a person_0 div id, a class of active is added to that and both hoverInfo_0 and bio_0 show up. At the same time, all other ids go and hide (for example, hoverInfo_1, hoverInfo_2, bio_1, bio_2, etc.
This is super inefficient because I want there to be 100+ person_ ids. I feel like I'm overlooking something obvious.
Pseudo code right now:
if person_0 div is clicked
give person_0 div active class
show hoverInfo_0
show bio_0
hide all other hoverInfo_# (say 1-1000)
hide all other bio_# (say 1-1000)
else if person_1 div is clicked
give person_1 div active class
show hoverInfo_1
show bio_1
hide all hoverInfo_# (say 1-1000) that does not equal hoverInfo_1
hide all bio_# (say 1-1000) that does not equal bio_1
else if ...
else if ...
I'm having a hard time trying to figure out how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?
how I can loop this around or use a variable in place of the _# value
to make this more efficient. Any thoughts?
Try this approach using starts with and filter
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
Demo
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
.bio, .hoberInfo
{
display: none;
background-color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="person_1">Person 1</div>
<div id="bio_1" class="bio">Bio 1</div>
<div id="hoverInfo_1" class="hoberInfo">HoverInfo 1</div>
<div id="person_2">Person 2</div>
<div id="bio_2" class="bio">Bio 2</div>
<div id="hoverInfo_2" class="hoberInfo">HoverInfo 2</div>
<div id="person_3">Person 3</div>
<div id="bio_3" class="bio">Bio 3</div>
<div id="hoverInfo_3" class="hoberInfo">HoverInfo 3</div>

Divs hiding and showing in a sequential order

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");
}

Toggle 2 div with one onclick

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.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

jquery hide not working for same div class after ajax call?

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.

Categories