How to use an arrow for slideToggle indicator? - javascript

CSS
#main_box{
width:300px;
height:20px;
border:1px solid #000000;
background-color:#FFCC00;
}
#slidingbox{
width:300px;
height:400px;
border:1px solid #000000;
background-color:#8AC007;
}
SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#main_box").click(function(){
$("#slidingbox").slideToggle();
});
});
</script>
HTML
</head>
<body>
<div id="main_box">Click to slide up and down</div>
<div id="slidingbox"></div>
</body>
</html>
I want to add an arrow at the end of first div as an indicator which will change as the second div slides up and down.
Does any one know how to do it?

Add two class for up and down arrows and toggle the class inside the heading click function.
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
heading 1
</div>
<div class="option-content">
<p>content 1</p>
<p>content 1</p>
<p>content 1</p>
<p>content 1</p>
</div>
//css
$(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
//script
$(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
Demo Jsfiddle

You can add pseudo element "after" arrow in the first div then create two class for both up and down.Each arrow contain different "content: url" css then add the class to the div.
//html
<body>
<div class="active" id="main_box">Click to slide up and down</div>
<div id="slidingbox"></div>
</body>
//script
$(document).ready(function() {
$("#main_box").on("click",function(){
$("#slidingbox").slideToggle('fast',function(){
if ($('#slidingbox').is(':hidden')) {
$("#main_box").removeClass('active')
$("#main_box").addClass('in-active')
}
else{
$("#main_box").removeClass('in-active')
$("#main_box").addClass('active')
}
});
});
});

Related

How to add class to a sub element with id in clicked div - jQuery

<div id="container">
<span id="hp"> add class here</span>
<span id="hp"> Do not add class here</span>
</div>
$("#container").on("click", function() {
code here
});
how do I click on the container then it adds a class="hero" to the first span with id in it? there are similar questions but not targeting the id. Thank you so much!
There are multiple ways of doing it .Below have mentioned couple of options
//Using find & eq
$("#container").on("click", function() {
$(this).find('span').eq(0).addClass('myClass')
});
//Using first-child psuedo selector
$("#container").on("click", function() {
$(this).find(':first-child').addClass('myClassRed')
});
//using children & first pusedo selector
$("#container").on("click", function() {
$(this).children(":first").addClass('myClassBrown')
});
.myClass {
color: green;
}
.myClassRed {
color: red;
}
.myClassBrown {
color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span> add class here</span>
<span> Do not add class here</span>
</div>
Try this:
$("#container").on("click", function() {
$(this).find('span:first').addClass('hero');
});
But yes, as pointed out in comments, IDs of the elements in an HTML page should be unique to avoid any unwanted bugs.
$(document).ready(function() {
$('.container').click(function(event) {
$(".container").parent().find('p').removeClass("color");
$(event.target).addClass("color");
});
});
.color{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p id="hp1"> add class here</p>
<p id="hp2"> Do not add class here</P>
</div>
id have to be unique so i changed first span id from hp to hp1
<div id="container">
<span id="hp1"> add class here</span></br>
<span id="hp"> Do not add class here</span>
</div>
<script>
$("#container").on("click", function() {
$("#hp1").addClass("hero");
});
</script>

Hide and show text by click on div

I have a question concerning an event onclick. I found this code during my research. My question is : even before the click the text already appears, is it possible to hide the text until we click on the actual button. And is it possible to have numerous onclick event working seperately that is o say only open the text above it? Thank you
<html>
<head>
<title>Show and hide div with JavaScript</title>
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "block") {
div.style.display = "block";
}
else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
happy coding :)
function showhide() {
var div = document.getElementById("newpost");
div.classList.toggle('hidden');
}
.hidden{
display : none;
}
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<!--if you want by default hidden then add class .hidden in new post -->
<div id="newpost" class="hidden">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
make it by default as none in style on display property.
<div id="newpost" style="display:none">
<p>This div will be show and hide on button click</p>
</div>
Yes. In your stylesheet, have the #newpost div display: none and also add a modifier class, .visible with display: block. Lastly in your function you could toggle the .visible class via classList.toggle and you should be good to go:
var div = document.getElementById('newpost');
document.getElementById('button').addEventListener('click', showhide);
function showhide() {
div.classList.toggle('visible');
}
#newpost {
display: none;
}
#newpost.visible {
display: block;
}
<button id="button">Click Me</button>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
In JQuery you can add multiple on click events to a button like so:
$("#button").on("click", function(){
$("#newpost").toggle();
});
$("#button").on("click", function(){
$("#secondpost").toggleClass("bold");
});
#newpost{
display:none;
}
.bold{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button">Click Me</button>
<p id="secondpost">toggle bold</p>
</body>
</html>
The first on click toggles the paragraph above.
The second on click toggles a class on the last paragraph that makes it bold.
html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
js
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});

Change content of div with button outside that div?

This question is a followup to a question asked a while ago.
Here is my block of code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div>
<a class="link" href="#about" data-link="first">Instructions</a> •
<a class="link" href="#about" data-link="second">Video</a> •
</div>
<div>
<div class="instruction_type" data-link="first">
<p>TEXT 1</p>
</div>
<div class="instruction_type" data-link="second">
<p>TEXT 2</p>
</div>
</div>
</body>
<script type="text/javascript">
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
</script>
It is functional! However, currently, you load the page and see two clickable links: "Instructions" and "Video." The rest of the page is blank.
I would like the page to DEFAULT to "Instructions" and then if you click "Video" it changes the content of the page.
To be clear: functional code, want to have the page display Instructions upon loading.
Just add this code to the end of your javascript:
$('.link:first').click();
This way, when the page loads, the first button is clicked..
Your javascript code would be something like this:
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
$('.link:first').click();
You are hiding both with this line:
<script type="text/javascript">
$('.instruction_type').hide();
You could change it to:
<script type="text/javascript">
$('.instruction_type[data-link=second]').hide();
To only hide the second one.
Why not use CSS instead, here's a FIDDLE
.instruction_type {
display: none;
}
.instruction_type:nth-child(1) {
display: block;
}
then in jQuery
$('.instruction_type[data-link="' + $(this).data('link') + '"]').fadeIn(300, 'linear').siblings('.instruction_type').fadeOut(300, 'linear');

Close current toggle div when clicked onto another div

So right now, I have a basic slide and toggle script which with help now has a background added to it when clicked. However, I would like it so when another "CLICK ME" is clicked it closes that div and opens the new div. In essence I don't want toggled divs constantly overlapping each other.
http://jsfiddle.net/schermerb/rAMQT/6/
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
.toggleBtn {
font:14px noral Futura, sans-serif;
color:black;
margin:50px;
cursor:pointer
}
.below {
background:red;
}
.toggleBtn.active{
background:blue;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
Try this way:
var $this = $(this);
$this.next('.below').slideToggle().siblings('.below').slideUp();
$this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active');
instead of
$(this).next('.below').slideToggle();
Fiddle
Use this:
var the_others = $('.active').not(this);
the_others.removeClass('active');
the_others.next('.below').slideUp();
Fiddle

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');
});

Categories