js Find Class Within Div + toggle CSS/Hide One Show Other - javascript

I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,
click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.
How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.
Here is what I currently have:
<html>
<div class="button">foo</div>
<span class='inner'>hey</span> <div class="button">bar</div>
<span class='inner'>hey again</span> </html>
<style>
.inner {
display: none;
}
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
} </style>
<script>
$(document).ready(function() {
$('.button').click(function() {
//first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
//alert($(this).find('.inner').html());
//alert($('.inner',this).html());
//then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
//if $(this).('.inner').css('display', 'inline'); { //this span is visible
$(this).('.inner').css('display', 'none'); //so hide this span
else { //span is not visible
$('.inner').hide(); //hide other span
$(this).find('.inner').css('display', 'inline'); //show this span
});
}); </script>
Thank you

Use this,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
next.toggle();
$('.inner').not(next).hide();
});
});
Demo Fiddle
Or CSS method,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
var cssState = (next.css('display') === 'none')?'inline':'none';
next.css('display',cssState);
$('.inner').not(next).css('display','none');
});
});
Demo Fiddle
.next() - next <span> element.
.toggle() - show/hide based on current state.

You can use jQuery accordian to fix this
All you need to do is import below mentioned lib file
http://code.jquery.com/ui/1.10.4/jquery-ui.js
HTML
<div id="accordion">
<div class="button">foo</div> <span>hey</span>
<div class="button">bar</div> <span>hey again</span>
</div>
JavaScript/jQuery
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: false
});
})
Please check this demo to get a clear idea
Demo Here

Try,
$('.button').click(function() {
var inner = $(this).next('.inner');
var display = inner.css('display');
inner.css('display',(display === 'none')?'inline':'none');
});
DEMO

Try this :
$(document).ready(function() {
$('.button').click(function() {
$('.inner').hide(); // hide all inner span
$(this).next('.inner').show(); // show next inner span
});
});
Here is the JSFiddle Demo

working code below,please check commenting to understand coding
<script>
$(document).ready(function() {
$(".inner").hide(); //hide all spans
$('.button:first').click(function() {//click on first div
var span1 = $('span:first').show(); // first span will show
});
$('.button:last').click(function() {//click on second div
var span1 = $('span:last').toggle();
var span2 = $('span:first').hide();
});
}); </script>

Test you view this code
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
padding:20px;
cursor:pointer;
}
http://jsfiddle.net/kisspa/24jTa/

Related

Targeting previous div in javascript or css

HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/
As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});
As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/
That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)
Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/
There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle

How to get index without counting the hidden elements?

I'm trying to get the index of clicked element. This works fine so far.
Problem is that you can hide elements. If an element is hidden I don't want it to be "counted" in the index.
If you have a look at the fiddle and all boxes are orange the index is how it should be. If you click on Click me to hide some divs -- they don't get removed, in reality they get a display:none; here they just get another color to give you an idea -- they also get the class hidden so now I don't want the index to index them. But if I click on Div 2 I would like the index to show 1
I've tried with $('div').not('hidden') fiddle here -> http://jsfiddle.net/rva54sy3/2/
<script>
(function($){
var indexBoxes = function(e) {
$element = $(this);
var index = $element.not('.hidden').index();
$( "h3.txt" ).text( "That was div index #" + index );
}
$(document).on( 'click', '.getIndex', indexBoxes);
})(jQuery);
$('.hide-some-divs').on('click',function(){
$('.hide').addClass('hidden').closest('.wrap').addClass('hidden');
});
</script>
<h3 class="txt">Click a div!</h3>
<div class="wrap clearfix">
<div class="getIndex">Div 0</div>
<div class="getIndex hide">Div 1</div>
<div class="getIndex">Div 2</div>
<div class="getIndex hide">Div 3</div>
<div class="getIndex">Div 4</div>
<div class="getIndex hide">Div 5</div>
</div>
<div class="hide-some-divs">Click me to hide some divs</div>
and if you like some styling:
<style>
.getIndex {
width:100px;
height:100px;
margin:5px;
background-color:orange;
float:left;
}
.wrap.hidden > div.hide {
background-color:#fafafa;
}
.hide-some-divs {
background-color:#afafff;
padding:10px;cursor:pointer;
margin:20px auto;
width:250px;
text-transform:uppercase;
text-align:center;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
</style>
Thanks for advices
You can get the index like this way
(function($) {
var indexBoxes = function(e) {
var index = $(".getIndex").not('.hidden').index(this);
$("h3.txt").text("That was div index #" + index);
}
$(document).on('click', '.getIndex', indexBoxes);
})(jQuery);
This will the index of given element corresponding to your selected list(not related to the immediate parent). Here the selected element list is .getIndex class divs which doesnt have the class name .hidden
Fiddle
You can use $.inArray() to get the index of clicked element from visible elements.
(function($){
var indexBoxes = function(e) {
$element = $(this);
var index = ($.inArray((this),$(".getIndex").not(".hidden")));
$( "h3.txt" ).text( "That was div index #" + index );
}
$(document).on( 'click', '.getIndex', indexBoxes);
})(jQuery);
Here's a link to fiddle!
In case you would actually hide them, you could use:
var index = $(".getIndex:visible").index(this);
The selector only counts elements with a class .getIndex that are also visible (aka not display: none)
However, that won't work with your example, because you use a background color to "fake" hiding them.

Prevent children divs from moving while div toggle

I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}
Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});
But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});
The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});

How to get displayed text of div using jquery

I have a div just like this:
<div id="content" style="width:300px; height:500px; overflow:hidden">
...large text...
</div>
I get the text in this div via the following code:
var text = $(content).html()
There is a lot of text in the div, and part of the text is hidden through overflow:hidden. I don't want to get all the text, but only the text that is currently visible in the div. How do I do that?
$("#content").text()
should give you the inner text of the div having the id of content.
Hide the div with js, removed the overflow:hidden part for the clickable link and nest the content div within it:
Show/hide
<div class="content">
...large text...
hide
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").hide(); //hide content on page load
$(".show_hide").show(); //show the clickable link
$('.show_hide').click(function(){
$(".content").slideToggle(); // slideToggle() shows and hides
});
});
</script>
.content {
Width: 300px;
height:500px;
background-color: #fff;
Color: #000;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
edit
Here let's say you have an and a inside the div
<script language="javascript">
function toggle() {
var text = document.getElementById("#content p");
if(text.style.display == "none") {
text.style.display = "block";
text.innerHTML = "show";
}
else {
text.innerHTML = "hide";
}
}
</script>
Then just call the toggle function from within

Slide div down when hover over other div, with timer

I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});

Categories