Show hide div inside parent div - javascript

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>

Related

Add class to single div per click

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.

how to check which children overflown the parent's div

first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>

Hiding/unhiding an element in HTML with internal page references

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.

How to change styling of a specific div onhover of another element when divs share an id

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

How Do I Arrange My div tags?

I'm a newbie and I'm trying to create a website. I want to create some div tags so that they are arranged like this:
1 2
5
3 4
with the 5 right in the middle of the other four.
so far I've been able to just get all 5 boxes inside of my main content div.
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Content for id "nav" Goes Here</div>
<div id="maincontent">
<div id="box5">Content for id "box5" Goes Here</div>
<div id="box4">Content for id "box4" Goes Here</div>
<div id="box3">Content for id "box3" Goes Here</div>
<div id="box2">Content for id "box2" Goes Here</div>
<div id="box1">Content for id "box1" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
Content for id "container" Goes Here</div>
what do I do to the divs to get my desired view?
I created an example for you that is very basic, naturally you will have to adjust it to fit your page. Essentially display divs 1 and 2 inline, as well as 3 and 4. After that just add adjustments as necessary.
<div class="one">1</div>
<div class="two">2</div>
<div class="five">5</div>
<div class="three">3</div>
<div class="four">4</div>
CSS:
.one, .two{
display: inline;
}
.five{
margin-left: 10px;
}
.three, .four{
display: inline;
}
CODEPEN DEMO
Order them 1, 2, 5, 3, 4
<div id="container">
<div id="header"></div>
<div id="nav">Content for id "nav" Goes Here</div>
<div id="maincontent">
<div id="box5">Content for id "box5" Goes Here</div>
<div id="box4">Content for id "box4" Goes Here</div>
<div id="box3">Content for id "box3" Goes Here</div>
<div id="box2">Content for id "box2" Goes Here</div>
<div id="box1">Content for id "box1" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
Content for id "container" Goes Here</div>
then using css you can align them.
#box1, #box2 {
display: inline-block;
width: 50%; (or whatever else you'd like)
}
#box1, #box3 { float:left; }
#box2, #box4 { float:right; }
now you have to fit 5 in the middle and make sure it's past 1 and 2.
#box5 {
clear: both;
margin-right:auto;
margin-left:auto;
}
and finally 3 and 4 after 5, very similar to 1 and 2's styling.
#box3, #box4 {
clear: both;
display: inline-block;
width: 50%; (or whatever else you'd like)
}
This schema should work:
HTML
<div id="maincontent">
<div id="box1" class="n_ln">Content for id "box1" Goes Here</div>
<div id="box2" class="n_ln">Content for id "box2" Goes Here</div>
<div id="box3" class="blck">Content for id "box3" Goes Here</div>
<div id="box4" class="n_ln">Content for id "box4" Goes Here</div>
<div id="box5" class="n_ln">Content for id "box5" Goes Here</div>
</div>
for css:
.n_ln {
display:inline-block;
width:50%;
background-color:red;
float:left
}
.blck {
display:block;
float:left;
width:100%
}
div {
text-align:center;
}
it gives you a very basical responsiveness too.
https://jsfiddle.net/9r361zrj/

Categories