Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .
Current code in JS fiddle : http://jsfiddle.net/WSCBu/
I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .
here is HTML
<div class="blue"></div>
<div class="gray">
<p> Show --> </p>
</div>
<div class="orange">
<p> -- Hide </p>
</div>
Css
.blue{
height:100px;
width:250px;
background:#1ecae3;
float:left;
}
.gray{
height:100px;
width:100px;
background:#eee;
float:left;
}
.orange{
height:100px;
width:150px;
background:#fdcb05;
float:left;
}
As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:
$('.orange').hide();
$('.gray, .orange').on(
'click',
function()
{
$('.gray, .orange').toggle()
}
);
$('.orange').hide();
$('.gray, .orange').on('click',
function() {
$('.gray, .orange').toggle()
}
);
.blue {
height: 100px;
width: 250px;
background: #1ecae3;
float: left;
}
.gray {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.orange {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
<p>Show --></p>
</div>
<div class="orange">
<p>-- Hide</p>
</div>
DEMO
$('.orange').hide();
$('.gray p').click(function(){
$('.gray').hide();
$('.orange').show();
});
$('.orange p').click(function(){
$('.gray').show();
$('.orange').hide();
});
Shorter code with .toggle()
DEMO
$('.orange').hide();
$('.gray p,.orange p').click(function(){
$('.gray,.orange').toggle();
});
Use following js :
jQuery('.gray').click(function(){
jQuery(this).hide();
jQuery('.orange').show();
});
jQuery('.orange').click(function(){
jQuery(this).hide();
jQuery('.gray').show();
});
Here is the working fiddle : http://jsfiddle.net/WSCBu/6/
Similar to above answer:
$('.gray').click(function () {
$(this).toggle();
$('.orange').toggle();
});
$('.orange').click(function () {
$(this).toggle();
$('.gray').toggle();
});
Demo.
$(".gray").click(function(){
$(".gray").toggle();
$(".orange").show();
});
$(".blue").click(function(){
$(".blue").toggle();
$(".orange").show();
});
$(".orange").click(function(){
$(".blue").toggle();
$(".gray").toggle();
$(".orange").toggle();
});
DEMO
$('.orange').hide();
$(".gray p").click(function(){
$(".gray").hide();
$(".orange").show();
})
$(".orange p").click(function(){
$(".orange").hide();
$(".gray").show();
})
Add a class show to the two div and then you can use a toggle method. example http://jsfiddle.net/WSCBu/21/
shown here.
<div class="blue"></div>
<div class="gray show" style="display:none";>
<p> Show --> </p>
</div>
<div class="orange show">
<p> -- Hide </p>
</div>
$(document).on('click','.show',function(){
$('.show').toggle();
});
I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)
<style>
.blue{
height:100px; width:250px; background:#1ecae3; float:left; }
.gray{
height:100px; width:100px; background:#eee; float:left; }
.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>
<div class="blue"></div>
<div class="gray"> <p> Show --> </p> </div>
<div class="orange"> <p> -- Hide </p> </div>
<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});
$(".orange p").click(function() {
$(".gray").show()
$(".orange").hide();
} );
</script>
Related
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
In my Code I need Something like this.
For grid I've used bootstrap grid system like this:
<div class= "row">
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
<div class = "col-xs-06"></div>
</div>
Now on a button click I have to show Selection. How to do that?
What you should do is using css :after, and if you are using JQuery, that is easy to do it.
As I understand, what you need is this when one of the div[s] clicked, you show a mark (tick) at the top right corner of it. So, 2113 is the code for check mark(tick) and you can use it in CSS content.
HTML:
<div class="container">
<div class= "row our-div">
<div class = "col-xs-6">div1</div>
<div class = "col-xs-6">div2</div>
<div class = "col-xs-6">div3</div>
<div class = "col-xs-6">div4</div>
</div>
</div>
CSS:
.active:after{
font-family: "FontAwesome";
content: "\2713";
position: absolute;
top: 5px;
right: 5px;
color: white;
background:green;
border-radius:25px;
width:18px;
height:18px;
text-align:center;
}
.our-div > div{
height:100px;
background:purple;
color:white;
}
JavaScript (JQuery):
$(".our-div div").click(function(){
$(this).toggleClass('active');
});
DEMO - JSFiddle
You can addClass() on click for each or add class to all .mark
$(".className").click(function(){
$(".className").addClass("mark");
});
to mark and unmark use toggleClass()
Reference:
jQuery toggleClass()
jQuery addClass()
Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>
here's what I have so far.
http://jsfiddle.net/nSfWs/
Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.
Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!
And for those who don't want to click on the jsfiddle link, here's the code.
<style type='text/css'>
div.product {
display:inline-block;
vertical-align:top;
text-align:center;
width:auto;
margin:0 47px 0 0;
padding:24px 22px 20px 27px;
border:1px solid transparent;
}
div.product:last-child {
margin:0px;
}
div.product:hover {
border:1px solid #878787;
-moz-border-radius:3px;
border-radius:3px;
}
div.product.unselected {
opacity:0.6;
filter:alpha(opacity=60);
}
div.product.selected {
border:1px solid #32a24e;
-moz-border-radius:3px;
border-radius:3px;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".product").click(function () {
$(this).toggleClass("selected");
});
});//]]>
//]]>
</script>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">1</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">2</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
<div class="description">3</div>
</div>
Simply remove the class from the siblings:
$(".product").click(function () {
$(this).toggleClass('selected').siblings().removeClass("selected");
});
just remove the class from other divs on click event,
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected")
$(this).toggleClass("selected");
});
});
and you can toggle the other class as well,
$(".product").click(function () {
$(".product").not(this).removeClass("selected").addClass('unselected')
$(this).toggleClass("unselected").toggleClass("selected");
});
See I have edited
Try using siblings() to change the class of the remaining divs.
$(this).siblings("product").addClass("unselected");
Try this:
$(".product").click(function () {
$(".product").removeClass("unselected");
$(".product").removeClass("selected");
$(this).addClass("selected").siblings().addClass("unselected");
});
Fiddle
Try this
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected").addClass("unselected");
$(this).removeClass("unselected").addClass("selected");
});
});
Fiddle
I have two buttons and two divs(I put one above another). I made "info" class visible and "info2" hidden. I need when pressed on "Global" button - "info" div is shown and on the "Asia" button - "info2" div. I tried this code but it's not working:
$('.corpo_button_asia').click(function(){
$('.info').hide;
$('.info2').show;
});
$('.corpo_button_global').click(function(){
$('.info').show;
$('.info2').hide;
});
Here is html code:
<div clas"corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
and css:
.corpo_buttons
{
height:50px;
}
.corpo_buttons_global
{
position:absolute;
z-index:10;
width:50px;
float:left;
background-color:rgb(23,55,94);
color:#FFF;
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.corpo_buttons_asia
{
position:relative;
z-index:2;
left:45px;
width:50px;
float:left;
padding:2px;
background-color:rgb(197,197,197);
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.info
{
position:absolute;
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
}
.info2
{
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
visibility: hidden;
}
Notwithstanding the class error noticed by #Sorpigal, the other problem is that you don't actually call .show and .hide because you've omitted the parentheses after the function names.
They should say .show() and .hide() !
This could be related to your "visibility: hidden;" in .info2. I'd suggest trying it with "display: none;" instead.
The way the jquery show/hide methods work is by toggling the display from none to block and back again. Chances are it's not paying attention at all to your visibility state.
If your absolutely dependant on visibility in your css you can change the code to toggle that one instead:
$('.info').css('visibility', 'hidden');
$('.info2').css('visibility', 'visible');
The problem is that your class assignment reads <div class="corpo_buttons_asia"> but in jquery you say .corpo_button_asia - note the "button" vs "buttons"
Fix this first.
Try with this:
DEMO jsBin
$('.corpo_buttons_asia').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_global').click(function(){
$('.info').show();
$('.info2').hide();
});
Check Corrected one as Below
<div>
<div class="corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
</div>
</form>
<script language="javascript">
$('.corpo_buttons_global').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_asia').click(function(){
$('.info').show();
$('.info2').hide();
});
</script>
your html class names does not match with jquery selectors.
<div clas in the 1st line of your html should be as <div class=.
anyway I created a jsfiddle for you. hope this helps
http://jsfiddle.net/5MvHZ/1/