Highlight and Hide DIV onClick - javascript

How to Animate/Highlight the Div before hide, when click on desired Div?
Here is my JS DEMO:
http://jsfiddle.net/L7tK3/17/
I want to animate or highlight the Clicked or Selected Div first and then its should hide.
Here is the HTML :
<div id="response_1" class="container">
<span id="1" class="hide_content">
Click Here To Hide First Div
</span>
</div>
<br>
<div id="response_2" class="container">
<span id="2" class="hide_content">
Click Here To Hide Second Div
</span>
</div>
<br>
<div id="response_3" class="container">
<span id="3" class="hide_content">
Click Here To Hide Third Div
</span>
</div>
Here is CSS:
.container{
border:#666666 solid 1px;
padding:4px;
}
Here is JS:
$('.hide_content').click(function ()
{
var current_number = $(this).attr("id");
$('#response_'+current_number).hide();
});

jsFiddle Demo
$('.hide_content').click(function () {
$(this).closest(".container").animate({ "background-color": "yellow" }, 500, "linear").
delay().fadeOut(500)
});
Animating the background color requires the jQuery.Color plugin (or jQuery UI).

A quick google search instantly led me here:
http://api.jquery.com/hide/
.hide( duration [, easing ] [, complete ] )
Come on.

Related

Changing image when div is active on SlideToggle

I currently have a setup with three seperate buttons that open three divs. I want one div (namely lockedin) to be open at the start. Furthermore, the divs should close when another is opened by the buttons, which I have accomplished now.
There is one more thing I require and cannot seem to get working properly. Is there a way to show which div is currently active? So when the page is loaded, button2 shows an orange filled button (which I have as an image) and the other two buttons show the white filled button. When another div is selected by means of for example button 1, the button 2 should change to the white filled button, and the button 1 should change to the orange filled button. I have the image SRC's, but just don't know how to select the image based on the active state of its given div.
Thank you in advance.
jQuery(document).ready(function( $ ){
//Start of Jquery
$('.button1').click(function(){
if ($('.product').css('display') === 'none') {
$('.product').slideToggle('slow');
}
$('.developers').slideUp();
$('.lockedin').slideUp();
});
$('.button2').click(function(){
if ($('.lockedin').css('display') === 'none') {
$('.lockedin').slideToggle('slow');
}
$('.product').slideUp();
$('.developers').slideUp();
});
$('.button3').click(function(){
if ($('.developers').css('display') === 'none') {
$('.developers').slideToggle('slow');
}
$('.product').slideUp();
$('.lockedin').slideUp();
});
// End of Jquery
});
.product {
display:none;
color: yellow;
}
.lockedin {
color:yellow;
}
.product_active{
display:none;
}
.developers {
display:none;
color: yellow;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product_active.png" class="product_active" alt="product_active" />
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
<div class="product">
Testdiv1
</div>
<div class= "lockedin">
Testdiv2
</div>
<div class = "developers">
Testdiv3
</div>

How to simultaneously hide and show content and vice versa?

I have a problem and I need your help. I have several links (in <aside>) leading to several different menus (in <section>). On click over the link, only the relevant div in <section> is shown, the rest are hidden. This part is ok and working. What is not working is when I click over an image:
the current div (.menu) in <section> should be hidden;
the same picture (with bigger size) should be shown;
when you click once again over the big image, the big image should disappear and the current div in .menu (the one that was hidden on the first step) should appear one more time. Sort of toggling between content.
So if I click on a picture on the "second div" content, the same picture with bigger size should be show (the "second div" content should be hidden) and when I click once again over the big picture it should disappear and the "second div" content to be returned.
I tried with toggle() but had no success. Either I did not use it correctly, or it is not suitable for my case. This is where I managed to reach to.
I will really appreaciate your support - how to show only the hidden div, not all hidden div's. Right now, when you click on the big image it did not show the hidden div.
$(window).on("load", function() {
$("div.menu:first-child").show();
});
$(".nav a").on("click", function() {
$("div.menu").fadeOut(30);
var targetDiv = $(this).attr("data-rel");
setTimeout(function() {
$("#" + targetDiv).fadeIn(30);
}, 30);
});
var pictures = $(".img-1, .img-2").on("click", function() {
$("div.menu:active").addClass("hidden");
//how to reach out only the current, active div (not all div's in .menu)?
$(".menu").hide();
var par = $("section")
.prepend("<div></div>")
.append("<img id='pic' src='" + this.src + "'>");
var removePictures = $("#pic").on("click", function() {
$(this).hide();
$(".hidden").show();
});
});
.menu {
width: 100%;
display: none;
}
.menu:first-child {
display: block;
}
.row {
display: inline-block;
width: 100%;
}
.img-1,
.img-2 {
width: 120px;
height: auto;
}
<!doctype html>
<html>
<head>
</head>
<body>
<aside>
<ul class="nav">
<li>To first div
</li>
<li>To second div
</li>
<li>To third div
</li>
</ul>
</aside>
<section>
<div class="menu" id="content1">
<h3>First Div</h3>
<div class="present">
<div class="row">
<div>
<p>Blah-blah-blah. This is the first div.</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>Blah-blah-blah. This is the first div.</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content2">
<h3>Second Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the second div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. Yjis is the second div.
</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content3">
<h3>Third Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the third div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. This is the third div.
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
Sorry for the ugly sketch and pictures - it is only to get an idea what it should look like....
In general, it's poor form to ask on Stack Overflow how to code for a specific behavior. However, that takes some understanding of the libraries you're using, and what you are trying to achieve. Hopefully, my answer will help you better articulate and form your questions in the future.
Here's a fiddle for you: https://jsfiddle.net/hwd4b0ag/
In particular, I've modified your last click listener:
var pictures = $(".img-1, .img-2").on("click", function() {
var parentDiv = $(this).closest('div.menu').hide();
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
.appendTo("section")
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
});
Now, let's review it!
First,
var parentDiv = $(this).closest('div.menu').hide();
In a jQuery listener, the this variable stores the current javascript DOM element that is the recipient of the event listener. In your case, it refers to an element that matches ".img-1, .img-2".
.closest(selector) will traverse up the DOM (including the current element) and find the first matching element for the provided selector. In this case, it finds your container div with class menu. Then we hide that div and save a reference to it in a variable.
Next, we create a full-sized version of the picture and assign it some attributes:
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
We set the data-parent attribute to the id of our container div, so we have a reference back to it later.
We then add our image to the DOM:
.appendTo("section")
And declare a new click listener for it:
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
With $(this).attr('data-parent') we use the reference to our container div that we assigned earlier, and then retrieve that element by its id. We unhide the container div and remove the full-sized image.
All done!
There are better ways to code this, but I think this is a good next step for you that's analogous to your current code.

How to toggle visibility of several divs separately

I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword

How to change the CSS on the last clicked div

I am creating a messaging inbox and would like to have the selected message (div) change colour when selected. I have done this but I am not sure how to set the div back to the original colour once another message (div) is selected. This is what I have so far but each message will get the selected class.
<script>
function getmessage(str) {
$('#mb'+str).removeClass('Message-Background');
$('#mb'+str).addClass('Message-Background-Selected');
// alert('#mb'+str);
// var lastmb = $('#mb'+str);
$('#mt'+str).removeClass('Message-Title');
$('#mt'+str).addClass('Message-Title-Selected');
//var lastmr = $('#mt'+str);
$('#mprev'+str).removeClass('Message-Text');
$('#mprev'+str).addClass('Message-Text-Selected');
}
</script>
<div id="mb1" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt1" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 1
</div>
<div id="mprev1" class="Message-Text" style="float:left;">
Message 1
</div>
</div>
<div id="mb2" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt2" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 2
</div>
<div id="mprev2" class="Message-Text" style="float:left;">
Message 2
</div>
</div>
<div id="mb3" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt3" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 3
</div>
<div id="mprev3" class="Message-Text" style="float:left;">
Message 3
</div>
</div>
Just make a function:
$("div").click(function() {
$("div").removeClass('Message-Text-Selected');
$(this).addClass('Message-Text-Selected');
});
You can also use toggleClass
http://api.jquery.com/toggleClass/
JSFiddle:
http://jsfiddle.net/hwgTr/
Since you want to change multiple elements I would set the click on the ".message-background" and toggle a class there that effects all of the css within it.
Javascript:
$(".message-background").click(function() {
$(".message-background").removeClass('Message-Background-Selected');
$(this).addClass('Message-Background-Selected');
});
Now the elements within the message-background can just inherit the selected state from it.
CSS:
.Message-Background-Selected {
border:1px solid red;
}
.Message-Background-Selected .Message-Title {
color:red;
}
.Message-Background-Selected .Message-Text {
color:red;
}
Could be done like this too:
$("div").click(function() {
$(this).addClass('message-selected').siblings().removeClass('message-selected');
});

jQuery Show/Hide - Make other elements have a smoother transition

Is there a way for the label/form below the 'myContent' div to have a smoother transition when I am hiding/showing it?
Currently, when the myContent div is toggled, the other elements below it 'jump' into place - it would be great if I could figure out a way to slide them up into their correct location. What do you think?
JavaScript
function toggleDiv(divId) {
jQuery("#" + divId).toggle("slide", {
direction: "up"
});
}
function ShowThing(divID) {
jQuery("#" + divID).show("slide", {
direction: "up"
}, 500);
}
function HideThing(divID) {
jQuery("#" + divID).hide("slide", {
direction: "up"
}, 500);
}
HTML
Toggle Button
<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
Click Here for jsFiddle
Optimized the javascript so that all code is based on jQuery.
HTML code
Toggle Button
<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
jQuery Code:
$(function(){
$('a.togglebtn').click(function(){
$('#myContent').stop().slideToggle(500);
return false;
});
$('#showthing').click(function(){
$('#myContent').slideDown(500);
});
$('#hidething').click(function(){
$('#myContent').stop().slideUp(500);
});
});
Your Jsfiddle is blank.
Instead of show() you can use slideDown('slow');
for hide you can use slideUp('slow'); Also you can set direction.
Otherwise you can use JQuery Animate

Categories