I have a div which contains a h2 tag and a p tag.
i wan a case where if the div is hovered (moverenter), the background colors of the h2 tag and the p tag get exchanged and when move leave it resets.
I am looking at this solution because i have many of the panels with different h2 tag and p tags. my approve so far:
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
on the jQuery i tried
$(document).ready(function(){
$(".panel").mouseenter(function(){
exchange($(this));
}).mouseleave(function(){
exchange($(this));
});
function exchange(e){
var x = e.children(".title"),
y = e.children(".desc");
x.css("background", "y.css('background')");
}
});
I am sorry, just learning JS
NB: since i have not gotten it working, i was also looking for a smooth transition effect on the exchange
Do you mean something like
$(".panel").mouseenter(function () {
var $this = $(this),
$h2 = $this.children('h2'),
$p = $this.children('p'),
h2c = $h2.css('background-color'),
pc = $p.css('background-color');
$h2.css('background-color', pc);
$p.css('background-color', h2c);
}).mouseleave(function () {
$(this).children('h2, p').css('background-color', '');
})
.panel h2 {
background-color: lightgrey;
}
.panel p {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
I didn't check everything but that won't work :
x.css("background", "y.css('background')");
Try something like :
var bgY = y.css('background');
x.css("background", bgY);
I made minor changes to your code
Hope it solves your problem.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$(".panel").mouseenter(function () {
$(".panel").toggle();
}).mouseleave(function () {
$(".panel").toggle();
});
})
</script>
</head>
<body>
<div class="panel" style="display:none" >
<h2 class="title" style="background-color:gray">This is the title</h2>
<p class="desc" style="background-color:lightgray">This is a decription</p>
</div>
<div class="panel" style="display:block" >
<h2 class="title" style="background-color:lightgray">This is the title</h2>
<p class="desc" style="background-color:gray">This is a decription</p>
</div>
</body>
</html>
For only exchanging CSS of p and h2 elements :-
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').css('background-color','green');
$(this).find('.desc').css('background-color','blue');
});
Now suppose , Lets say you set some background-color to your p and h2 elements .
CSS
.title{
background-color: green;
}
.desc{
background-color: blue;
}
SCRIPT
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').removeAttr('style');
$(this).find('.desc').removeAttr('style');
});
You can find all the children of the panel and change their backgroundcolor.
You can do this on mouseEnter:
$(".panel").children().css("background-color","red");
And on mouseLeave take another backgroundcolor.
And for the animation part, if you're working with simple background colors you could use animate().
...
function exchange(e)
{
var x = e.children(".title"),
y = e.children(".desc");
bg1 = x.css('background-color'),
bg2 = y.css('background-color');
x.animate({ "background-color": bg2 }, 1500);
y.animate({ "background-color": bg1 }, 1500);
}
...
Here you are a working example http://jsfiddle.net/9a1qe9q9/2/
jQuery
$(".panel").mouseenter(function () {
exchange($(this));
}).mouseleave(function () {
exchange($(this));
});
function exchange(e) {
var x = e.children(".title"),
y = e.children(".desc"),
xColor = x.css('background'),
yColor = y.css('background');
x.css("background", yColor);
y.css("background", xColor);
}
Related
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
Working Sample, jsFiddle
Please find it here.
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Content_text = $(".name").text();
$("#titlebar").text(Content_text);
});
});
</script>
</head>
<body>
<button>Copy</button>
<div class="name">Content-text</div>
<div id="titlebar">copy here</div>
</body>
</html>
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from the HTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() {
var div1Data= document.getElementById('div1');
var div2Data= document.getElementById('div2');
div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
Content in div 1
</div>
<div id="div2">
</div>
<button onClick="copyContent()">Click to copy</button>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(document).ready(function(){
var Content_text = $(".name").text();
//alert(Content_text);
$(function() {
$(window).mousewheel(function(turn, scroll) {
if (scroll > 0) $('#titlebar').text('Content_text');
else $('#titlebar').text('Copy here');
return false;
});
});
//$("#titlebar").text(Content_text);
});
</script>
</head>
<body>
<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>
</body>
</html>
I've a few divs which need to be swapped on click of the corresponding buttons.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="css/jquery-3.2.0.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
</body>
</html>
For e.g., when I click on Swap with right in div one, it should swap div one and div 2 visually as well as in the DOM it should change to -
<div class="container">
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
Likewise, how would I also achieve the same for swapping with any of the left, top, down divs?
Basically, using insertBefore/After will not swap the divs, but move them along, this can be demonstrated by using your current method
$(toMove1).insertAfter($(toMove1).next());
To get the top left div to swap with the one below you could expand on this and use
$(toMove1).insertAfter($(toMove1).next().next());
But this would only move div 'one' to the place of div 'three'. Then div 'two' would fall into div 'one's slot, and 'three' into 'two's.
However, once a div has been moved what happens next?
For example, if you keep clicking 'Swap with right' should it swap with the div below and to the left, should it re-label the button to 'Swap with left'?
I have added four positional divs (with a 'parent' class), so you can move the divs you want in the DOM, and also use rules for labels etc. within each area. I've demonstrated using 'topLeft', 'bottomRight' etc. but you could have an array of many different positions and use indexes if you want.
The code below can be refactored to selectively update event handlers, label changing, and code reduction, but to make it easy to see what is happening I have left it pretty verbose.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="topLeft" class="parent">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<div id="topRight" class="parent">
<div class="box" id="two">
<p>two</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<div id="bottomLeft" class="parent">
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="top">Swap with top!</button>
</div>
</div>
<div id="bottomRight" class="parent">
<div class="box" id="four">
<p>four</p>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Set the event handlers on load...
resetEvents();
});
function UpdateDivs(parent1, parent2, class1, class2) {
var parent1Content = $('#' + parent1).children();
var parent2Content = $('#' + parent2).children();
$(parent1Content).find('.' + class1).each(function () {
swapButtonClass(this);
});
$(parent2Content).find('.' + class2).each(function () {
swapButtonClass(this);
});
$('#' + parent1).append(parent2Content);
$('#' + parent2).append(parent1Content);
resetEvents();
}
function resetEvents() {
// Clear the current handlers - because the buttons will change their class.
// The handlers are still attached to the buttons that were seen with that class initially.
// This could be done selectively, but for demo purposes, just resets all of them when the DOM is changed.
$('.right').unbind('click');
$('.left').unbind('click');
$('.top').unbind('click');
$('.down').unbind('click');
$('.right').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('Left', 'Right');
UpdateDivs(parent1, parent2, 'right', 'left');
});
$('.left').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('Right', 'Left');
UpdateDivs(parent1, parent2, 'left', 'right');
});
$('.down').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('top', 'bottom');
UpdateDivs(parent1, parent2, 'down', 'top');
});
$('.top').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('bottom', 'top');
UpdateDivs(parent1, parent2, 'top', 'down');
});
$('.container').eq(0);
}
function swapButtonClass(button) {
// Swap class and labels when moving the divs around.
switch (button.className) {
case "right":
$(button).removeClass('right').addClass('left').text($(button).text().replace('right', 'left'));
break;
case "left":
$(button).removeClass('left').addClass('right').text($(button).text().replace('left', 'right'));
break;
case "top":
$(button).removeClass('top').addClass('down').text($(button).text().replace('top', 'down'));
break;
case "down":
$(button).removeClass('down').addClass('top').text($(button).text().replace('down', 'top'));
break;
}
}
</script>
</body>
</html>
It seems you have created multiple questions for this issue :).
I answered your previous question here.
jsfiddle here
Code
function resetButtons() {
// enable and show all buttons
$("button").prop("disabled", false).show();
// First box (top left), disable and hide top and left
var firstBox = $(".box").eq(0);
firstBox.find(".top").prop("disabled", true).hide();
firstBox.find(".left").prop("disabled", true).hide();
// Second box (top right), disable and hide top and right
var secondBox = $(".box").eq(1);
secondBox.find(".top").prop("disabled", true).hide();
secondBox.find(".right").prop("disabled", true).hide();
// Third box (bottom left), disable and hide down and left
var thirdBox = $(".box").eq(2);
thirdBox.find(".down").prop("disabled", true).hide();
thirdBox.find(".left").prop("disabled", true).hide();
// Fourth box (bottom right), disable and hide down and right
var fourthBox = $(".box").eq(3);
fourthBox.find(".down").prop("disabled", true).hide();
fourthBox.find(".right").prop("disabled", true).hide();
}
For swapping, we will play with array-index of the boxes and swap the html content of each box.
function swapContent(divA, divB) {
var tempDiv = divA.html();
divA.html(divB.html());
divB.html(tempDiv);
}
For example, right button will swap current box and the one next to it (on its right).
$(".container").on("click", ".right", function(e) {
var currentBox = $(this).parents('.box');
var currentIndex = $(".box").index(currentBox);
console.log(currentIndex, "right", currentBox);
swapContent(
currentBox,
$(".box").eq(currentIndex+1)
);
resetButtons();
});
Ok, I've got this to work for swapping with left & right divs.
Now, stuck with top and down!
Here's my updated code.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="top">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<script>
$(document).ready(function() {
$('.right').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.next();
$(toMove1).insertAfter($(toMove1).next());
});
$('.left').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
$(toMove1).insertBefore($(toMove1).prev());
});
$('.container').eq(0);
/*
$('.down').click(function(){
//alert('ok');
toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
var toMove2 = $(toMove1).insertAfter($(toMove1).next());
$(toMove2).insertAfter($(toMove2).next());
});
$('.top').click(function(){
//alert('ok');
toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
$(toMove1).insertAfter($(toMove1).prev());
});
$(".box").first().css({"background-color":"yellow"});
$('.box:first-child').eq(3).removeClass('.left');
$('.box:first-child').eq(3).addClass('.right');
*/
});
</script>
</body>
</html>
Also, how do I ensure that the button swap with right changes to swap with left if it's a right element and similarily, changes accordingly for each button, when a div is swapped?
My HTML
<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
</div>
</div>
</div>
</div>
<div class="abc"></div>
</body>
My Script
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$(".abc").css({position: "absolute", top: top_pos, left: left_pos });
$(".abc").show();
$(".popup").show();
});
});
I want to apply the left and top to abc class which is without parent and not to the class which is under id="txt_blog_editor"
According to this answer here is a working snippet:
jQuery.expr[':'].noparents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var elts = $(".abc").filter(":noparents(#txt_blog_editor)");
elts.css({ "background-color": "green" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
ABC With Parent
</div>
</div>
</div>
</div>
<div class="abc">ABC WITHOUT Parent</div>
Basically, you create a new jQuery expression :noparents which returns elements not having selector given parents
You need to check if .abc has a parent #txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$('.abc').each(function(){
if (!$(this).parents('#txt_blog_editor').length) {
$(this).css({position: "absolute",top: top_pos, left: left_pos });
$(this).show();
$(".popup").show();
}
});
});
If abc classes are only direct childs of body, why not using body > .abc as your selector?
I am trying to make a div auto hide and show other div like changer. It does not work when I use multi div inside the main div:
<div id="div1">
What actually happens is that it hides all content of the inside div(s)
Is there any way to keep my div(s) for save my style and make an auto changer for my div(s)?
html code
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
<div id="mydiv" style=" left:200; width:100; background-color:#F605C6;">
<div id="main_adv" class="a" style="position:absolute;text-align:left;width:673px;height:256px">
<div id="Layer3" class="a" style="position:absolute;text-align:left;left:176px;top:56px;width:490px;height:171px" title=""></div>
<div id="img_adv" class="a" style="position:absolute;text-align:left;left:4px;top:55px;width:169px;height:172px;" title="">
<img id="ri" class="a" src="thumbs/img1.png" />
</div>
<div id="title_adv" class="a" style="position:absolute;text-align:right;left:4px;top:6px;width:662px;height:40px;" title="">
<div style="position:absolute;text-align:right;right:6px;top:4px;">
<span style="color:#000000;font-family:Arial;font-size:29px;right:5px">some text</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
</div>
</body>
Javascript code
$('html').addClass('js');
$(function() {
var timer = setInterval( showDiv, 400);
var counter = 0;
function showDiv() {
if (counter == 0) { counter++; return; }
$('div','#container')
.stop()
.hide()
.filter( function() { return this.id.match('div' + counter); })
.show('fast');
counter == 16? counter = 0 : counter++;
}
});
I wrote some basic code that changes divs continiously like you asked :
jsfiddle.net/5jhuK/
HTML
<div id='container'>
<div id='div1' class='display' style="background-color: red;">div1</div>
<div id='div2' class='display' style="background-color: green;">div2</div>
<div id='div3' class='display' style="background-color: blue;">div3</div>
</div>
CSS
.display {
display: none;
}
JS (jQuery)
$(document).ready(function () {
var activeDiv = 1;
showDiv(activeDiv); // show first one because all are hidden by default
var timer = setInterval(changeDiv, 2000);
function changeDiv() {
activeDiv++;
if (activeDiv == 4) {
activeDiv = 1;
}
showDiv(activeDiv);
}
function showDiv(num) {
$('div.display').hide(); // hide all
$('#div' + num).fadeIn(); // show active
}
});
It's really not complicated, next time when you ask something try to be concise and remove unnecessary code (like #mydiv)
a few things:
1. html ids are unique, so you can just do something like below:
2. your code was missing a # in the find (e.g. "#div"+counter)
3. you can use the child selector ">" to just target divs one level down
var counter=1;
function showDiv() {
$('#container > div').hide()
$("#div"+counter).show();
counter == 3? counter = 1 : counter++;
}
So I'm trying to make an accordion of sorts for my projects section of my website and I've run into a very strange issue (or maybe I'm just really tired). The first click to expand a selection works fine, but when the header is clicked again to return to the original state the contents of the previously expanded header become hidden. Furthermore, upon clicking the same header again to expand any time after the first the containing border disappears.
To see my problem in action just go to my website:
http://cole.quinnchrzan.com/cc2
and see for yourself by clicking on the projects section.
If you just want to take a look at the code here it is:
$(document).ready(function() {
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
});
and the HTML:
<section id="projects">
<div class="header">Websites</div>
<div>Saia LTL, Inc.
<div></div>
</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
I added some extra css 'height': '29px' 'z-index': '2' to try and make the affected heading show again but it just creates an empty div. Without this css the div has no height.
try this.
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).siblings().slideDown(400);
$(!$(this).children(":first")).slideUp(400);
}
sign = sign*-1;
});
------------------------------------------------------------------------------------------------------------------------------------
ALTERNATE SOLUTION
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header) > .ShowThis').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).parent().siblings().slideUp(400);
}
else {
$(this).parent().css('border-bottom', '1px solid black');
$(this).parent().siblings().slideDown(400);
$(this).children().slideUp(400);
}
sign = sign*-1;
});
It was a silly mistake. I simply forgot to select only div children when hiding/showing so the a children were remaining hidden or something. In other words I changed this:
$(this).children()
to this:
$(this).children('div')
Thanks to pfried for the indication!
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script>
$(document).ready(function() {
$('div.header div.slide').css('display','none');
$('div.header').toggle(
function(){$('div.header').hide('fast'); $(this).show('slow'); $('div.slide').css('display','block');},
function(){$('div.slide').css('display','none'); $('div.header').show('fast');});
});
$(document).ready(function(){
var text = $('div.cont');
$('div.slide').toggle(
function(){$('div.slide').hide('fast'); $(this).show('slow'); $('div.cont').css('display','block');},
function(){ $('div.cont').css('display','none'); $('div.slide').show('fast');});
})
</script>
<style>
.off{display: none;}
.on{ display: block;}
div.cont{ display: none;}
.slide{ display:none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites
<div class='slide'>Saia LTL, Inc.
<div class='cont'>a;dasndiasfhnip</div>
</div>
<div class='slide'>Insurance House<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Casey Sills Photography<div class='cont'>dasndiasfhnip</div></div></div>
<div class="header">Personal Projects
<div class='slide'>cTV<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>PoE DPS calculator<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>tSlide<div class='cont'>dasndiasfhnip</div></div></div>
</div>
</body>
i would prefer this one just try it
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>$(document).ready(function() {
var sign = 1;
$('#projects > div.header').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
$('div.slide').click(function(){
$('div.cont').slideToggle('slow');
});
});
</script>
<style>
div.cont{ display: none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites</div>
<div class='slide'>Saia LTL, Inc.
<div class='cont'></div>
</div>
<div class='slide'>Insurance House<div class='cont'></div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'></div></div>
<div class='slide'>Casey Sills Photography<div class='cont'></div></div>
<div class="header">Personal Projects</div>
<div class='slide'>cTV<div class='cont'></div></div>
<div class='slide'>PoE DPS calculator<div class='cont'></div></div>
<div class='slide'>tSlide<div class='cont'></div></div>
</div>
</body>
i just tried adding a class to siblings to denote them specifically ---- is it u are looking I'm happy or anything else in particular please comment me ----- thankyou