i'd like to know what i should do to show only one div out of multiple divs with the same classname. If one is open and i click another, the one that is open should close, and the one that i clicked on should open.
HTML:
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
CSS:
.out {
width:150px;
height: 25px;
background-color: green;
float: left;
margin-right:10px;
}
.open {
border-bottom:5px solid peru;
height: 150px;
}
.out.open .content {
width:100%;
height:100%;
}
a {
display: none;
}
.open .content {
display: block;
}
.open .content > a {
color: white;
text-decoration: underline;
display: block;
}
JS:
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$(this).addClass('open');
});
});
I know the problem is in the jquery, but i have no clue of what i'm doing wrong.
Here's a fiddle too: http://jsfiddle.net/4hpgb/22/
Just change this line:
$('.out').find('open').removeClass('open');
to this:
$('.out').removeClass('open');
It should work.
What is happening is that you're removing all classes open from all div.out, then adding class open to the current one.
JSFIDDLE DEMO
$('.out').click(function () {
$('.out').removeClass('open');
$(this).toggleClass('open');
});
Write:
$('.out').click(function () {
if(!($(this).hasClass('open'))){
$('.out.open').removeClass('open');
}
$(this).addClass('open');
});
Updated fiddle here.
Close all the open divs first
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$('.open').each(function(i,v){
$(this).removeClass('open');
});
$(this).addClass('open');
});
});
Demo here
Related
I have a dropdown that works with CSS. I want it to disappear when an item in the dropdown is clicked, but still function correctly after words.
Here is what I have so far:
$("span").click(function(){
$(this).parent().hide();
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
.dropDownContainer:hover .dropDown {
display: block;
}
span{
cursor:pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
hover over this
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>
You should add a timeout to remove the display none right after you hide. so the cursor wont be positioned in a way it will automatically reopen (on hover this) so its fine.
$("span").off().click(function(){
var dropdown = $(this).parent();
dropdown.hide();
setTimeout(function(){dropdown.removeAttr('style');}, 300);
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});
You didn't have any event handler to hover and open it first. If you close or open something with CSS, you should use CSS to open or close it as well, same goes for JS/jQ, otherwise they may conflict.
SNIPPET
$(".dropDownHeader").on('mouseenter', function() {
$(".dropDownContainer").show();
$("kbd").on("click", function() {
$('.dropDownContainer').hide();
});
});
.dropDownContainer {
display: none;
padding-left: 6px;
background-color: black;
color: white;
position: absolute;
}
.dropDownHeader:hover .dropDown {
display: block;
}
kbd {
cursor: pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="dropDownHeader">
<h3>Hover over this</h3>
</header>
<div class="dropDownContainer">
<p>This is the dropdown</p>
<p>Click <kbd>this</kbd> to close drop down.</p>
<p>It doesn't work.</p>
</div>
<article id="text">
</article>
I have updated your code a bit see this fiddle: https://jsfiddle.net/dLcLoggx/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
<span class="trigger">hover over this</span>
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
span{
cursor:pointer;
color: red;
}
$(".dropDown span").click(function(){
$(this).parent().slideUp();
});
$("span.trigger").hover(function(){
$('.dropDown').slideDown();
});
I have the following code to show and hide a div but if I want to click on the image I can add the class but if I want to remove it by clicking the image then it will open it again. Can anyone explain to me how this works?
https://jsfiddle.net/bmhv3edw/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
You can see that when you clicked on the img, the e.target is <img>, as it don't have class .active, it'll always trigger the false part.
Solution, change
if($(e.target).is('.active')) {
to
if($(this).is('.active')) {
See jsFiddle
You can greatly simplify your logic by using slideToggle() on the current .answer-section-content, and slideUp() on all the rest:
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
This allows you to remove the ids from the answers and the hrefs from the divs.
$(document).ready(function() {
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
});
body{ background: black };
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
color: #ffffff;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png">Question 1</div>
<div class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png" />Question 2</div>
<div class="answer-section-content">
<p>Answer 2</p>
</div>
</div>
</div>
I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance
TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock break">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workCont {
width:1024px;
margin: $center;
overflow:hidden;
.workBlock {
float:left;
margin-left:17px;
&:nth-child(3n+1) {
margin-left:0;
}
&:nth-child(1n+1) {
margin-top:33px;
}
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: absolute;
z-index:100;
width: 0px;
height: 0px;
-webkit-transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
transform: scale(50, 50);
top: 0px;
left: 0px;
width: 1000px;
height: 1000px;
clear:both;
}
.workName {
text-align:center;
margin-top:17px;
}
}
}
jQuery:
$(document).ready(function(){
$(".workImg").click(function() {
$(".test").toggleClass("open");
});
});
use $(this)
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
});
});
I would like to create links to content that is hidden by a show/hide java script. There are three divs within each hidden content with videos and text to which I would like create links; e.g., create a link to the "example" div shown in the code below. It doesn't have to be linked directly to each div. Creating a link destination above the div would be even better. I hope my question makes sense.
The code I am using for the show/hide works perfectly. This is a generic version of that code:
HTML
<p>***Visible content***
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>***Hidden content***</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
CSS
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
JavaScript
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
Hoping that I understand your question. Study the example below
HTML
$(document).ready(function() {
$('li').click(function () {
$('.content:visible').hide(); // hides the visible content before
$('.content').eq($(this).index()).show(); // shows the corresponding content
});
});
li {
display: inline;
text-transform: uppercase;
font-family: calibri;
height: 24px;
}
.content {
font-size: 60px;
color: red;
}
.content:not(:first-of-type) {
display: none; /* Hides all but the first .content div */
}
li a {
padding: 0 15px 0 15px;
text-decoration: none;
line-height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="content"> Content One</div>
<div class="content"> Content Two</div>
<div class="content"> Content Three</div>
<div class="content"> Content Four</div>
Note: Had to put this together to help you understand how you can achieve what you want, so you have to make necessary changes to get it to work for you.
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}