Develop Reference

removal of active class from nav tabs

Well, i tried to create a layout like instagram and faced the following problem. I hope i'll get help from experts in this regard. And i tried various ways to remove the active class after clicking on the nav tab , but everytime there arose a problem. let me know how can i remove the active class from this piece of javascript as attached below.
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
content.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})

Your javascript code is almost working, but there are typos in contents instead content. That typo makes javascript returns an error and the code below doesn't be executed. And you can remove the active class from that tab by targets.forEach(...
const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
targets.forEach(t => {
t.classList.remove('active')
})
contents.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>

You can use classList.remove()
Example:
var element = document.getElementById("targetid");
element.classList.remove("active");
More documentation

How do I slide a Div in <li> using javascript or Jquery?

I am required to me make a Textual slider which is going to slide after every 3 seconds but I am not able to find out how to to do this.
the slider must slide the div inside it from right to left. It is not just like any image slider.
Kindly help me out how to achieve this, i have tried all the help from stackoverflow and jsFiddle but i am not getting anything thats why I have left my Script blank so that you can tell me how to do step by step.
here is my code:
<div class="dslider">
<div class="d30">
<div class="bottom_mini_slide_container">
<ul class="bottom_ul">
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make1 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make2 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make3 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="d70">
<div class="top_mini_slide_container">
</div>
</div>
</div>
CSS:
.dslider{
height: 696px;
width: 100%;
background-color: rgb(255,255,255);
float: left;
background:url(../images/background/Slider%20Background.png) no-repeat;
background-size:100% 100%;
}
.d30{
width:37.5%;
float:left;
height:100%;
}
.d70{
width:62.5%;
float:left;
height:100%;
}
.bottom_mini_slide_container{
width:100%;
height:471px;
position:relative;
top:224px;
border-top:1px solid #000;
border-right:1px solid #000;
}
.top_mini_slide_container{
width:100%;
height:570px;
position:relative;
top:0;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.bottom_ul{
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
.bottom_ul li{
display:block;
width:100%;
height:100%;
overflow:hidden;
float:left;
}
.bottom_single_div{
width:100%;
height:100%;
float:left;
}
.bottom_single_div_padded{
padding-top: 150px;
width: 81%;
height: 289px;
float: left;
padding-right: 19%;
}
.bottom_single_div_padded p{
font-size: 28px;
text-align: left;
padding-left: 65px;
padding-right: 65px;
margin: 0;
margin-top: -39px;
color:#1294de;
padding-top: 83px;
}
.make_big{
font-size: 64px;
position: relative;
left: 39px;
top: 64px;
font-family:mifont;
}
and here is the blank script:
<script>
$('document').ready(function(e) {
setInterval(function(){
}, 3000);
});
</script>

CSS3 Divs side by side, arrangement

I have problem with divs arrangement.
Here is my code:
#container{
}
#block1{
vertical-align: top;
display: inline-block;
width:49%;
height:50px;
background-color:red;
}
#block2{
vertical-align: top;
display: inline-block;
width:49%;
height:100px;
background-color:blue;
}
<div id="container">
<div id="block1"></div>
<div id="block2"></div>
<div id="block1"></div>
<div id="block1"></div>
</div>
And issue is arrangement, it looks like this:
But i need to look like this. Arrange divs up without white spaces.
Any ideas here? Thanks :).
Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/

css
#container{
}
#block1{
background-color: #FF0000;
display: inline-block;
float: left;
height: 50px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
#block2{
background-color: #0000FF;
display: inline-block;
float: left;
height: 100px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
.alignment{
float: left;
width: 50%;
}
HTML
<div id="container">
<div class="alignment">
<div id="block1"></div>
<div id="block1"></div>
</div>
<div class="alignment">
<div id="block2"></div>
<div id="block1"></div>
</div>
</div>
Note: ID of any HTML control should be unique

Reorder your div's like this (also changed the id to class):
<div id="container">
<div class="block2"></div>
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
Then use float instead of inline-block:
.block1{
vertical-align: top;
float: right;
width:49%;
height:50px;
background-color: red;
}
.block2{
float: right;
width:49%;
height:100px;
background-color: blue;
}
Updated Fiddle

You can group them into two divs and then get the desired result. As shown below:
#container{
}
.left{
float:left;
width:49%;
margin-right:2%
}
.right{
float:right;
width:49%;
}
.block1{
vertical-align: top;
display: inline-block;
width:100%;
height:50px;
margin-bottom: 10px;
background-color:red;
}
.block2{
vertical-align: top;
display: inline-block;
width:100%;
height:100px;
background-color:blue;
}
<div id="container">
<div class="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
<div class="block1"></div>
</div>
</div>

https://jsfiddle.net/cn2r3tga/3/
Updated fiddle.
"float:right"
should be used for those going to the right.

first you use id which should be used only once so use classes instead which you can re-use as many times as you want.
Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:
<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>

Make a div to fill the rest of the available screen height

I have this structure:
I would like to make content2's min-height = height of screen - height of other divs.
With the HTML/CSS below, the outcome is greater than the screen height. So How can I do what I wanted? The copyright part (footer) is inside the content2, so I want to make the content2's height to be exact in the screen.
body {
margin:0;
border:0;
background-color:#24373B;
color: #fff;
}
#headerBG {
min-width:980px;
background-color:#000;
}
#header {
width:980px;
}
#content1 {
width:980px;
}
#content2 {
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height:100hv;
}
<body>
<div id="headerBG">
<div id="header">header</div>
</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
</body>

You are using 100hv instead of 100vh as min height. Fixed:
#content2{
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height: calc(100vh - 50px);
}
But before you use vw or vh, you should define:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}

You don't have to use viewport units (vw, vh). You could simply do it with CSS table layout as follows. The height of the pink area will expand and fill out all the free space automatically.
http://jsfiddle.net/qtu89zhm/
html, body {
height: 100%;
margin: 0;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.box {
width: 500px;
margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
height: 100%;
}
.header .cell {
background: gray;
}
.header .box {
background: teal;
}
.content-1 .box {
background: gold;
}
.content-2 .box {
background: pink;
}
<div class="table">
<div class="row header">
<div class="cell">
<div class="box">header</div>
</div>
</div>
<div class="row content-1">
<div class="cell">
<div class="box">content1</div>
</div>
</div>
<div class="row content-2">
<div class="cell">
<div class="box">content2</div>
</div>
</div>
</div>

If I understand your question correctly...
body{
margin:0;
border:0;
background-color:#555555;
height:100vh;
width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
height:10%;
}
#header{
width:980px;
height:100%;
width:10%;
background-color:#FFF;
}
#content1{
width:980px;
height:40%;
background-color:#000000;
margin-left:5%;
width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
margin-left:5%;
width:90%;
height:50%;
}
<body>
<div id="headerBG">
<div id="header">
</div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>

Div elements won't use whole space

I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:
JSFIDDLE: http://jsfiddle.net/A2bU7/
CSS:
#pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
height:70%;
}
#board > div {
background-color: grey;
border:#000 1px solid;
width:10%;
height:20%;
float:left;
margin:15px;
padding:15px;
font-size:64px;
cursor:pointer;
box-shadow: 0px 5px 14px grey;
border-radius: 5px;
transition: 0.2s;
}
#board > div:nth-child(6n+1) {
clear: both;
}
#board > div:hover {
box-shadow: 0px 0px 25px black;
transition-timing-function: all ease-in-out;
}
HTML:
<html>
<div id="pagewrap">
<div id="board">
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
</div>
<div>
</html>

Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.
#board > div {
margin: 5px;
padding: 25px 20px;
}
fiddle with margin/padding change.
fiddle with percentile width/height.

Reduce your margin and maybe increase your padding.