I hope someone can help. There are 3 divs with employee-block class in the html code included. I would like to add javascript/jquery code to expand/collapse anything after the 2nd div (or employee-block div). This is my html:
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<div class="employee-details"><span class="red strong">support#.net</span><br /><p>testing description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
I have this jquery code, but not sure how to plug it in. In my example html code I only want to hide/show the 3rd employee-block div, so really anything more than 2 because there could be more than 2:
<script type="text/javascript">
$(document).ready(function () {
$('div.view').hide();
$('div.slide').click(function () {
$('div.view').slideToggle(400);
return false;
});
});
Your question is not very clear for me, but look at this code:
$('a.createSomeButton').click( function() {
if ( ! $('#IwillCollapse').length ) {
$('.employee-block:gt(1)').wrap('<div id="IwillCollapse" />');
}
$('#IwillCollapse').slideToggle();
return false;
});
This should help you get on your way. There's many different ways to achieve what you want but this might be the easiest to grasp. http://jsfiddle.net/jSZxp/1/
var employeeBlocks = $('.employee-block').slice(2); //returns all after the first 2
employeeBlocks.addClass('hidden'); //attach the hidden class
$('button').on('click', function(){
employeeBlocks.toggle('hidden'); //toggles the hidden class
});
Related
I have a container div with two divs inside of it, like such:
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
I have wrapped another div around 'child1' and 'child2' but it's appearing twice which I haven't been able to fix:
$(".child1, .child2").wrapAll('<div class="style"></div>');
Which is rendering out as the following:
<div class="container">
<div class="style">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
</div>
But what I actually want is the following:
<div class="container">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
How do I go about fixing this? I have tried numerous other methods of trying to sort the double-append.
EDIT: The issue was jquery was firing twice, I moved the code out of the existing file and into a new file. Once I did this the answers below all worked.
Try:
$(".container > div").wrapAll('<div class="style"></div>');
Change you markup little bit, (just add common class)
<div class="container">
<div class="child1 child"></div>
<div class="child2 child"></div>
</div>
now use below code:
$( ".child" ).wrapAll( "<div class='style' />");
$(".child1").next().andSelf().wrapAll("<div class='style'/>");
Try it...
I ran this in fiddle and it seems to work fine... ??????
You can do this though...
$(".container").each(function() {
var ch1 = $(this).find('.child1');
var ch2 = $(this).find('.child2');
var st = $('<div class="style">');
st.append(ch1);
st.append(ch2);
$(this).html('').append(st);
});
I'm making a site with video backgrounds that are preloaded so all my content needs to be on the same page. I have a div with my first section in it as "slide1" for example. I need to remove this div and replace it with "slide2" on a button click. I've tried using javascript to load "slide2"s html in on the click but the code I've tried just writes the div to a white page with no styling. I need it to be loaded inside my content div with the appropriate stylings in place.
my html code:
<script src="assets/js/introduction.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="slide1">
<p>Here is the first trigger. It should look something like this</p>
<p><input type="button" onclick="part2()" value="Click Me!" /></p>
</div>
</div>
the javascript file with the content:
function part2() {
document.write('\
<div id="slide2">\
<p>Here is the second trigger. It should be to the left</p>\
<p>next line goes here</p>\
</div>'
);
}
I've been stuck on this for days and it's driving me insane. Any help would be great
Why don't you just create all the slides in the html and hide all of them except slide 1?
Then when they click the button hide slide 1 and show slide 2. Something like this
<div id="content">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
Next
JS
$(function(){
var currentSlide = 0;
$(".slide").hide();
$(".slide:eq(0)").show();
$("#next-button").on("click",function(e){
e.preventDefault();
$(".slide:eq(" + currentSlide + ")").hide();
if(currentSlide == $(".slide").length - 1){
currentSlide = 0;
}else{
currentSlide++;
}
$(".slide:eq("+ currentSlide +")").show();
});
});
http://jsfiddle.net/cNTgQ/1/
If you are okay with JQuery try using .replaceWith()
See the official page for more info.
you can use this:
function part2() {
var html = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
//here you append the slide2;
$('#content').append(html);
//here you remove it
$('#slide1').remove();
}
Like the other guy said, try using replaceWith() from jQuery, here's your function:
function part2() {
var content = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
$('#slide1').hide().replaceWith(content).show();
}
I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});
Anyone have a solution for this ?
Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.
Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.
Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});
I'm trying to use jQuery to rotate an image 90 degrees upon click on my div.
Why doesn't it work?
Here's my HTML ...
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
.. and here's my jQuery ;
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
jQuery(this).find('img').rotate({animateTo:-90})
});
});
If it helps,
http://code.google.com/p/jqueryrotate/wiki/Examples
NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.
According to #Abdullah Jibaly post and look at comment. I think you miss something like
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
And here is an example to rotate at first image http://jsfiddle.net/oamiamgod/BeUBF/2/
Your code looks fine as is, I'd guess that the plugin is not being loaded or something else outside the given context went wrong.
To get the first img you can use:
jQuery(this).find('img').first().rotate({animateTo:-90})
// according to use it
<div class="class1">
<div class="class2">
<img src="https://www.google.com/images/srpr/logo3w.png">
<img src="https://www.google.com/images/srpr/logo3w.png" >
</div>
</div>
<button id='test'>click</button>
<script>
jQuery(document).ready(function() {
var setvalue=90;
jQuery("#test").click(function() {
jQuery('.class1').find('img').rotate({
animateTo: setvalue
});
setvalue=setvalue+90;
});
});
</script>
https://code.google.com/p/jqueryrotate/wiki/Examples
fisrt letter of class name should not be a number, change them to class1 and class2 instead and add quotation marks for animateTo value:
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
$(document).ready(function() {
$(".class1").click(function(){
$(this).find('img').rotate({animateTo: "-90"})
});
});
try it
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
$("#whatever").rotate(90);
});
});