I'm new in programming.
I have multiple sibling divs with the same class and a view more button.
I want to add class to the div on the view more button click, but one by one.
So the first sibling-div will be visible and view more button.
When a user clicks on the button the second sibling-div should be visible, then on clicking again the third sibling-div should be visible and so on.
I don't have access to html so i used jQuery to add the view more button.
I have used CSS to hide all the sibling divs by default. Only the first div, view-more-btn button and when there's active class they will be visible.
I've tried to add class using jQuery but it adds to all the divs.
This is the html
<div class="parent-div">
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div view-more">
<a class="view-more-btn">View More</a>
</div>
</div>
This is my CSS
.parent-div .sibling-div{
display: none;
}
.parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{
display: block;
}
This is my jQuery
$(document).ready(function(){
var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>';
$(".parent-div .sibling-div:last-child").after(view_more);
$(".parent-div .view-more-btn").click(function(){
/*Adds class to all sibling divs*/
$(".parent-div .sibling-div").addClass("active");
/*Also tried*/
$(".parent-div .sibling-div:first-child").next().addClass("active");
/*But it only adds class to the second sibling*/
/*Also tried using loop*/
var div_length = $(".parent-div .sibling-div").length();
for(i=0; i <= div_length; i++){
$(".parent-div .sibling-div").addClass("active");
}
});
});
I've tried all this methods but it doesn't work the way I want.
It adds class to all the sibling-div, or just the second sibling-div
You can access the next hidden element in the group with
$(".parent-div .sibling-div:hidden:first")
:hidden targets elements with no opacity or display:none.
:first is a jQuery selector that targets the first item of the match.
$(document).ready(function() {
$('.parent-div').append('<div class="" view-more"><a class="view-more-btn" href="#">View more</a></div>');
$(".parent-div .view-more-btn").click(function() {
$(".parent-div .sibling-div:hidden:first").addClass("active");
});
});
.parent-div .sibling-div {
display: none;
}
.parent-div .sibling-div:first-child,
.parent-div .sibling-div.active,
.parent-div .sibling-div.view-more {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
</div>
I recommend to just add an id in each <div id="div-1" class="sibling-div"> for the purpose of accuracy whatever you do in that div.
Related
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
I have a series of div's that get loaded dynamically. There ID is set when the page loads, and they all have the same class of "pp-post". When the user hovers over an item with class="pp-post" the 'p' items within that become visible.
I want to add a different animation for each of these 'p' tags when they become visible.
I have minimal experience with JQuery so I am wondering how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags.
As for the animations not sure yet what to use but it could be JQuery animations or maybe use animations.css and add a class to the p tags when visible.
HTML:
<div id="{post_id}" class="pp-post">
<div id="{post_id}" class="pp-post-item">
<p id="{post_id}" class="pp-post-title"></p>
<p id="{post_id}" class="pp-arrow-down"></p>
</div>
</div>
CSS:
.pp-post-title {
visibility: hidden;
}
.pp-arrow-down {
visibility: hidden;
}
.pp-post-item:hover > p {
visibility: visible;
}
how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags
You can use $(this) to get the hovered pp-post.
The code will look like
$('.pp-post').hover(function(){
$(this).animate({
//animation code
});
});
To make p tag visible,
$('pp-post').hover(function(){
$(this).find('p').animate({
//animation code
});
});
Instead of animation function, you can also use certain specific functions like fadeIn
Sample snippet
$(document).ready(function() {
$('.pp-post').hover(function() {
$(this).find('p').fadeIn(2000);
});
});
.pp-post p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
Would it be possible to have the internal page reference hide/unhide an element.
<div class="hidden">
<div id="thanks">
<h1>Thank you!</h1>
<p></p>
</div>
</div>
So you would visit "http://www.website.com/#thanks" and the div "hidden" would be hidden / vice versa
Yes, using the :target pseudo class.
#main {
display: none;
}
#main:target {
display: block;
}
main
<div id="main">
main section
</div>
Alternatively, you can nest hidden content inside of the :target like this.
.hidden {
display: none;
}
:target .hidden {
display: block;
}
main
<div id="main">
<div class="hidden">
main section
</div>
</div>
You can use the following JavaScript to get the value after hash (#) from a URL.
var hash = location.hash.substr(1);
You can then hide/unhide based on the results.
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}
There are couple of child divs in a parent div. I want to show/hide a particular child.
<div id="parent">
<div id="child0">Text here</div>
<div id="child1">Text here</div>
</div>
I want on mouse over div id="parent" to show hide div id=child0, everything else in parent div stays the same (visible).
You can do it all with CSS. Assuming this HTML:
<div id="parent">
<div id="child0">Child0 Text here</div>
<div id="child1">Child1 Text here</div>
</div>
You can add something like this CSS:
#child0 {
display: none;
}
#parent:hover #child0 {
display: block;
}
See it in action here: http://jsfiddle.net/QjeUq/
Try this:
CSS:
.outer_wrapper_class .inner_wrapper_class {
display: none;
}
.outer_wrapper_class:hover .inner_wrapper_class {
display: block;
}
HTML:
<div class='outer_wrapper_class'>
<!-- HOVERABLE CONTENT HERE -->
<div class='inner_wrapper_class'>
<!-- HIDE/SHOW CONTENT HERE -->
</div>
<!-- HOVERABLE CONTENT CAN ALSO BE HERE -->
</div>