I want to hide the current div that's displayed using .toggle when another is clicked.
When another div is toggled by clicking on another link in .left, I want the div that's currently displayed in .right to disappear and be replaced with the one that's clicked. Currently div's that have been toggled stay there until toggled off onclick, I want the toggle off to trigger when another div is selected from .left
Tried using .hide and an if statement, but couldn't seem to get the JS to function properly. If someone could just point me in the right direction that would be great.
Apologies if I've phrased this badly (new to SO). Happy to edit accordingly.
JS fiddle
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="left">
<div class="row">
<div class="links">
When this link is clicked, i want the first div to be shown
When this link is clicked, i want the second div to be shown
When this link is clicked, i want the third div to be shown
When this link is clicked, i want the fourth div to be shown
</div>
</div>
</div>
<!--left-->
<div class="right">
<div class="row">
<div>Content to be shown when the first link is clicked</div>
<div>Content to be shown when the second link is clicked</div>
<div>Content to be shown when the third link is clicked</div>
<div>Content to be shown when the fourth link is clicked</div>
</div>
</div>
<!--right-->
</div><!--wrap-->
CSS:
.links a {
display: block;
}
.row > div:not(.links) {
display: none;
}
.wrap {
width: 1000px;
height: 1000px;
}
.left {
width: 500px;
height: 1000px;
float: left;
display: inline;
}
.right {
width: 500px;
height: 1000px;
float: right;
display: inline;
}
.links a {
width: 490px;
}
.links {
margin-top: 20px;
}
JS:
var links = $('.links a');
links.on('click', function() {
var n = links.index(this);
$('.row > div:not(.links)').eq(n).toggle();
});
Add the following to your code inside the function
$('.row > div:not(.links)').hide();
Here is JS fiddle
Check out this i little edit your code see live demo at https://jsfiddle.net/7xt1d887/ Hope it will help You :)
ADD this
$('.right .row').find('div').hide();
Related
Maybe the question is confusing but let me give you an example, when I spam click the button that toggles the width, the div with keep on animating way after the button press and it doesn't look amazing. What I want is for the div to stop midway and go the other way and not complete its existing animation when the button is pressed again.
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
Here is the fiddle, so you can see what exactly what I'm talking about. Try spamming the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
Help would be greatly appreciated, I have looked everywhere and I can't seem to find anything on my problem.
You can use .stop() method. Try this
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").stop().animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
You can check if element is not animated before do animation
https://api.jquery.com/is/
https://api.jquery.com/animated-selector/
$(document).ready(function(){
$('.menuToggle').click(function(){
if( $('.menuContainer').is(':animated') ) { return false; }
$(".menuContainer").animate({width: 'toggle'});
});
});
.menuContainer{
height: 100vh;
width: 15vw;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
So I'm currently trying to figure out how to use the .show() and .hide() functionality provided by jQuery to show and hide a div-class or a p-class containing some text, and I want to be able to click inside the div-parent to be able to show the context. Not to have a button but let's say i hover over a div-class containing a short text and a logo the background changes, and I want to be able to click on this class and show the hidden content inside parent-class.
I'll try to ilustrate this with the pictures below:
So after I click in the div-class this should extend the existing class and show the hidden content:
I hope someone can get me on the right track here and help me solve this.
Cheers
You could solve your concern in pure CSS on hover. Check if this is what you're looking for!
.content:hover, .content2:hover, .content3:hover {
height: 200px;
}
or you can use jQuery!
Note: This code is to retain the transition when the div expands with a dynamic height.
Updated
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto"}).appendTo("body");
height = elem.css("height"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
});
}
$("document").ready(function(){
$(".content, .content2, .content3").hover(function(){
var h = $(this).css("height");
if(h == '50px'){
$(this).animateAuto('height', 20);
}
else{
$(this).css("height", '50px');
}
});
});
.content, .content2, .content3 {
padding: 5px;
height: 50px;
width: 25%;
margin:0 2%;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
background:#666;
border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h2>Div 1</h2>
<p>This is an example! This is an example!</p>
</div>
<div class="content2">
<h2>Div 2</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example2!</p>
</div>
<div class="content3">
<h2>Div 3</h2>
<p>This is an example! This is an example!</p>
</div>
Rather simple to acchieve by using event handlers like hover or mouseenter.
$("div").hover(function(event){
$(this).show();
/*OR*/
$(".selector").show();
});
You can find all the events here:
http://api.jquery.com/category/events/
... and all the mouse events here:
http://api.jquery.com/category/events/mouse-events/
Please do refer another way of approach using pure css
<div class="box-content">
<h2>Div 1</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
<div class="box-content">
<h2>Div 2</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
<div class="box-content">
<h2>Div 3</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
.box-content { padding: 5px; height: auto; width: 25%; margin: 0 2%; float: left; background: #666; border-radius: 5px; }
.box-content p { display: none; }
.box-content:hover p { display: block; color: #fff; }
When the main container element is clicked find all of the children of the clicked element with the hidden-text class and show them.
$(".hidden-text").hide();
$(".container").click(function() {
$(".container").children(".hidden-text").hide();
$(this).children(".hidden-text").show();
})
.container{
width:100px;
display:inline-block;
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
I want to have two divs side by side, the first one contains a table of information the other will contain two buttons a delete and edit. The first div I want to be 100% of the screen the second will be off the screen to start with then once I click the first div with the table the second will slide out and push the first div over and show the delete and edit buttons
<div id="div1">
<table>
<tr>
<td>Some Information</td>
</tr>
</table>
</div>
<div id="div2">
<button id="delete"></button>
<button id="edit"></button>
</div>
//Javascript Code
<script>
$(document).ready(function(){
$('#div1').click(function {
//slide div2 out and push div1 to the left to show delete and edit buttons
});
});
</script>
I am trying to make it similar to the iOS mail app where you can swipe to delete but instead you will click and if you click again div1 will push div2 off the screen so basically I want to toggle the delete and edit div on and off the screen.
Not sure what javascript and css is involved in this. Thanks in advance for any answers.
You can do something like such structure the actionable elements in a div which will then be shifted around based on the state.
<div id="div2">
<div class="inner">
Fusce fermentum
</div>
<div class="actions">
<button id="delete"></button>
<button id="edit"></button>
</div>
</div>
Have #div2 be position:relatve;
#div2 {
background: #eeeeee;
padding: 20px 80px 20px 20px;
overflow: hidden;
position: relative;
}
.actions {
background: red;
position: absolute;
height: 100%;
right: -60px;
top: 0;
transition: right 0.2s ease-in-out;
width: 60px;
}
.reveal .actions {
right: 0;
}
Then just toggle the class with jQuery:
$(document).ready(function() {
$('#div2').click(function() {
$(this).toggleClass('reveal');
});
});
http://jsfiddle.net/P6gAe/1/
And this to your head
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
Add this to your script
$(document).ready(function(){
$( "button" ).click(function() {
$( "#div1" ).hide( "drop", { direction: "up" }, 500 );
});
});
I have two div's next to each other - left one and right one.
There is possibility, that the right one will be gone, then i want the left one to be centered.
HTML
<div class="contener">
<div class="left"></div>
<div class="right></div>
</div>
CSS:
.left {
width: 75%;
height: 240px;
float: left;
}
.right {
width: 25%;
height: 250px;
float: right;
}
.contender{
text-align:center;
}
.left {
width: 75%;
height: 240px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
.right {
width: 25%;
height: 250px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
the asterisk(*) is used to fix ie7 so it's a bit of a hack.
You can set the display property of .left and .right to inline-block and set the text-align:center for the parent element as jayaguilar pointed out. However, not that this won't work with the exact html and css you've.
You need to either remove the line break between inline elements in your html markup as follows:
<div class="container">
<div class="left"></div><div class="right"></div>
</div>
or comment it out
<div class="container">
<div class="left"></div><!--
--><div class="right">
</div>
or reduce their width to something less than 100% in order to accommodate the whitespace after inline-block elements.
Demo (click the remove button)
<div class="contener">
<div class="left"></div>
<div class="right"></div>
</div>
And now some easy jQuery:
$(".right").click(function() {
$(this).hide();
$(".left").css({ 'text-align': 'center'});
});
So with that we make "desapear" the right one, and then you do what you want with the left one! :)