So I have here a content div <div class="content"> that is hidden when going mobile using media queries, what I want to do is when pressing the head title <div class="head"> to toggle (slide) the hidden content div.
HTML Code:
<div class="container">
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
<div class="blocks">
<div class="head">Head Title</div>
<div class="content">Content Text</div>
</div>
</div>
CSS:
/* Responsive Media Queries */
#media screen and (max-width: 560px) {
.content { display: none; }
}
I tried this way with Javascript, but doesn't work:
$( ".head" ).click(function() {
$( "#content" ).toggle();
});
I can't make it work, I would appreciate some ideas, thanks!
$(document).ready(function () {
$(".head").click(function () {
$(this).next(".content").toggle();
});
});
In your code, you didn't get the "content" selector right: you're searching for an element with id="content" which isn't present in your HTML. The code above will realibly find & toggle the corresponding content element for a clicked head element as long as your HTML structure remains as is.
Related
I have searched in several similar threads, but I do something wrong and it seems to not work.
I have this HTML structure:
<div id="form" class="inquiry-section">
<div class="inner">
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-straight-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-gshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-pshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-isle-ab">some content</div>
</div>
</div>
</div>
</div>
What I want to achieve is after clicking an input in .inner-form to .slideDown() the .inner-ab in the same .inner-form-col and to .slideUp() all the .inner-ab in the other columns. I made it work with .show() / .hide() or switching a class but as I need height: auto, I cannot achieve animation AND re-flowing the content below.
Have You try jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/
I somehow managed to make it work by using this, but I'm not 100% sure why it does:
$('.inner-form-col').each(function() {
var $dropdown = $(this);
$(".inner-form input", $dropdown).click(function(e) {
$div = $(".inner-ab", $dropdown);
$div.slideDown();
$(".inner-ab").not($div).slideUp();
});
});
I'm fooling around with draggable elements and found myself stuck on the stacking part.
I have three windows that are draggable and when clicked the specific element stacks on top the other two. However the stacking order seem to be "reset" on the other two when a window is clicked. For example if I click on .window1 and .window2 is in the back it ends up on top of .window3.
I'm using javascript with a onmouse z-index property for the stacking. Is there a way to make only the clicked element stack on top without affecting the other two? Any help or pointing in the right direction is welcome, cheers!
HTML:
<div class="window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
My javascript for drag and z-index for stacking:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header" });
$('.window1, .window2, .window3').on('mousedown', function(event) {
$('.window1, .window2, .window3').css('z-index','1');
$( this ).css('z-index','1000');
});
Use the Stack option to bring the current dragged item to the front without affecting the other items:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header", stack: ".window" });
.window1 {
background-color: orange;
width: 100px;
}
.window2 {
background-color: lightgreen;
width: 100px;
}
.window3 {
background-color: yellow;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="window window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
I thought this would be kinda straightforward but i cant wrap my head around this. I got to following html:
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
I need to grab/detach the div's .test and put/append them into the .item div's. So the first div .test needs to go in the first div .item, the second div .test to the second div .item etc. So it becomes:
<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>
</div>
Now i found some jquery code and i came to this:
var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);
child.detach();
parent.append( child );
This works but as suspected, it detaches/appends the first div. Now i need to detach/append them all one by one and from reading a lot of topics, i think i need to put a loop/each in there somewhere but i have no idea how and im not getting any closer after screwing around for hours.
Anyone who can put me in the right direction with this?
You can move all of them easily by just using the append() method and selecting all the divs:
$('#bar').append( $('#foo div') )
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
Alternatively, if you want to do something with each element, you can use .each():
$('#foo div').each(function(i, elem) {
var $elem = $(elem);
//Do stuff
$('#bar').append($elem);
});
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
On solution is to get both collections and iterate over one of the collections. Also note that you don't need to use .detach. .append will already do that.
var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");
$fooItems.each(function(index, el) {
$(this).append($barTests.eq(index));
});
Example Fiddle
I think there are two solutions for your issue : .childern() function or usiing jQuery selectors
For example using selector :
$("#bar > div")
or using children() function :
$("#bar").children("div");
also look at this post, you may have your answer here : jQuery - get all divs inside a div with class ".container"
I'm trying to fade the Movies div of this HTML
<div class="row">
<div id=Movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
and I'm using this jquery code
<script>
$(function(){$("#Movies").show("slow");
});
</script>
I've also tried this:
<script>
$(document).ready(function(){$("#Movies").fadeIn(3000);
});
</script>
But it ain't working. The page loads with no fade in. The div just loads like every other element. What's wrong with this?
Add this CSS to make it hidden, then only it will fadeIn slowly when the page loads
#Movies {
display:none;
}
For that to work; #movie has to be hidden, then show when the document is ready as the jQuery function implies.
$(document).ready(function() {
$("#movies").fadeIn(3000);
});
#movies {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id=movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
First you have to hide the movies div and then fade in. Also i see that your id "Movies" is not withing quotes in the question code snippet. Hope it helps.
Html
<div class="row">
<div id="Movies" class="col-md-4" style="display:none">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
Javascript
$(document).ready(function(){
$("#Movies").fadeIn(3000);
});
Suppose I have 3 page as below:
page 1:
<div id="content">
<div id="red"></div>
</div>
page 2:
<div id="content">
<div id="blue"></div>
</div>
page 3:
<div id="content">
<div id="green"></div>
</div>
This 3 page are in the same template, so if I add
#content {
margin-top: 10px;
}
All page will apply this style, If I only want to put this style to page 3, how can I do that?
Generally, we use $('#content > #green').css(...) to point to a element, but can we have something like $('#content < #green') to point to a reversed element and give it some style?
You can use:
$('#green').parent().css(...);
If you want to be completely specific, you can do:
$('#green').parent('#content').css(...);
Or you could create a new style class 'contentClass' which holds the styles for elements with id="content" and apply the style class to red, green, and blue. In this way, content becomes an abstract container with no styles, and the actual styling gets moved where it should.
So in your style sheet:
.contentClass {
/* Your content styles here /*
}
And on your pages:
<div id="content">
<div id="red" class="contentClass"></div>
</div>
<div id="content">
<div id="green" class="contentClass"></div>
</div>
<div id="content">
<div id="blue" class="contentClass"></div>
</div>
Have you tried $("#content eq(index of element)") ??