Show and hide element through Javascript

Show and hide element through Javascript - javascript

In given below code I want to include show and hidden feature.
There are three header tags with the unordered list in my code.
By default all unordered list are hidden.
When I click on first header then it displays its corresponding unordered list.After it if I click on second/third header then it is not hiding previously opened unordered list.
What i want : when clicking on a header, previously opened unordered list must not display.
Try to understand my question by running below code.
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Help me...

You just need to select all the already .show and change them to .hidden and then atlast changed the clicked header children to .show. In this way only 1 <ul> will have class show
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
document.querySelectorAll('ul.show').forEach(ul=>{
ul.className="hidden"
})
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show < div < article < main > ul{
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>

Make sure you only add the click eventlistener to the headers, not all elements! Also before you add the show class to the ul belonging to the header, first remove all other show classes from the ul's of the other headers. I have also changed the adding of the show class to toggling of the show class so on a second click on the same header the menu closes again:
//JAVASCRIPT
var selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].parentNode.children[1].classList.remove("show");
}
let parent = e.target.parentNode.children[1]; // selects ul
parent.classList.toggle("show");
}
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>

//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
let selectAllUL = Array.from(selectAllHeader).map(header => header.parentNode.querySelector('ul'));
function show_article(e) {
let parent = e.target.parentNode.querySelector('ul') // selects ul
selectAllUL.forEach(function(node) {
node.classList.remove('show');
node.classList.add('hidden');
});
parent.classList.add('show');
parent.classList.remove('hidden');
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Not the most elegant solution. But should solve the problem at hand.

You can remove the .show class from all your elements and replace it with hidden, and only once you have done that add the .show class to the click element.
See working example below:
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
[...document.querySelectorAll('.show')].forEach(elem => {
elem.classList.remove('show');
elem.classList.add("hidden");
});
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>

Related

ON OFF by the generated button does not work

I'm using CSS and Javascript.
I'm trying to generate a toggle button to switch the brightness.
Why can't the code below switch styles?
◆ Toggle button Javascript ◆
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body")
.insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" />
<label for="L_D_check" onclick="Light_dark_Switch()" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
////////////////////////////////////////////////////////
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch() {
let _css = document.body.appendChild(document.createElement('style'));
let html = document.documentElement;
// if( ( Number % 2 ) !== 0 ) {
if (!(_css.textContent).length) {
// if( _css.textContent !== null ){
// if(_css.style.display=="none"){
// _css.textContent.style.display = "block";
_css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(_css);
// _css.disabled = true;
// _css.disabled = false;
// html.classList.toggle(_css);
// }
} else
// if (Number % 2 === 0) {
if ((_css.textContent).length) {
// if( _css.textContent % 2 === 0){
// if( _css.textContent !== null ){
// _css.textContent = null;
// if(_css.style.display=="block"){
// _css.textContent.style.display = "none";
document.head.removeChild(_css);
_css.textContent = undefined;
// }
}
}
◆Toggle button CSS ◆
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
When switching by key down, you can switch with the above capacity, but you can not switch in the same way.
Why can't I switch? What am I missing?
please tell me.
// Successful switching of key events
window.addEventListener("load", () => {
let css = document.body.appendChild(document.createElement('style'));
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
if (!css.textContent) {
css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(css);
} else {
if (css.textContent) {
document.head.removeChild(css);
css.textContent = undefined;
}
}
}
});
});

I think the simple way you can do this that move onclick="Light_dark_Switch(this)" to check box. Get check box value inside Light_dark_Switch and add CSS per your need to HTML and Body using javascipt getElementsByTagName.
Check the below snippet.
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
and for e.ctrlKey && e.keyCode == 122 you can simply trigger checkbox by using click().
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
<html>
<body>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </body>
</html>

Equal height column across two divs

I have been searching and cannot find an answer to this question. I have two divs, one contains one column and the other contains two columns. I am looking to get the three columns to equal heights across the the tow divs. I am sure this is possible I just don't know it yet. Here is code below. As you can see I can get them to align across the bottom but I am missing something.
.cplan-section{
display: flex;
}
.technical-products{
width:33%;
}
.training-products{
width:66%;
}
.section-title{
padding: 30px 0;
}
.technical-products, .training-products{
display:flex;
flex-direction: column;
justify-content: space-between;
}
.cproducts, .train-video, .job-aids{
padding:10px;
}
.col-header p{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.col-body{
padding:0 10px;
color:#000;
background-color: #d5deed;
}
.col-header{
min-height: 100px;
line-height: 100px;
text-align: center;
background-color: #98cb42;
color:#fff;
}
.col-tp{
width:50%;
border:2px solid #000;
}
.col-cp{
border:2px solid #000;
}
.sectioncp, .sectiontp{
display:flex;
}
.col-tp{
flex-direction:vertical;
}
.cp-header, .tv-header, .ja-header{
background-color:#98cb42;
color:#fff;
padding:5px
}
/*media for plan section */
#media (max-width: 767px){
.covid-plan-section{
display: inline;
}
.technical-products, .training-products{
display:block;
}
.technical-products{
width:100%;
}
.training-products{
width:100%;
}
.sectiontp{
display:flex;
}
.col-tp{
display:flex;
flex-direction: column;
justify-content: space-between;
}
}
#media (max-width: 479px){
.covid-plan-section{
display: block;
}
.technical-products, .training-products{
display:block;
}
.technical-products{
width:100%;
}
.training-products{
width:100%;
}
.sectiontp{
display:inline;
}
.col-tp{
width:100%;
}
}
<div class=cplan-section>
<div class=technical-products>
<div class=section-title>
<h2 style="text-align: center;">This is Section 1</h2>
</div>
<div class=sectioncp>
<div class=col-cp>
<div class=cproducts>
<div class=col-header>
<p style="text-align: center;">Title 1</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class=training-products>
<div class=section-title>
<h2 style="text-align: center;">This is section 2</h2>
</div>
<div class=sectiontp>
<div class=col-tp>
<div class=train-video>
<div class=col-header>
<p style="text-align: center;">Title 2</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class=col-tp>
<div class=job-aids>
<div class=col-header>
<p style="text-align: center;">Title 2</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Your proposal, without setting a height or min-height property is not possible.
"Same-height" elements have no possibility of doing that, without referencing siblings in the same "line" using flexbox.
What you could do (unorthodox, almost a bad practice if you will be needing to dynamize, I'm guessing you won't), at least is my solution for your problem is to put it all together in the same flex container, one after the other.
That will end up as:
.title1
.title2
.col1
.col2
.col3
Rendering this:
But how? Your structure simplified:
<div class="cplan-section">
<div class="products">
<div class="title1">
<h2 style="text-align:center;">This is Section 1</h2>
</div>
<div class="title2">
<h2 style="text-align:center;">This is section 2</h2>
</div>
<div class="col1">
<div class="cproducts">
<div class="col-header">
<p style="text-align: center;">Title 1</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class="col2">
<div class="train-video">
<div class="col-header">
<p style="text-align: center;">Title 2</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class="col3">
<div class="job-aids">
<div class="col-header">
<p style="text-align: center;">Title 2</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
And this is your CSS:
html { padding:30px; }
* { font-family:"Arial", sans-serif; box-sizing:border-box; }
.cplan-section .products {
width:100%;
display:flex;
flex-wrap:wrap;
border:1px solid #aaa;
padding:10px;
}
.cplan-section .products div[class^="title"] {
text-align:left;
padding-left:20px;
}
.cplan-section .products .col1,
.cplan-section .products .col2,
.cplan-section .products .col3 {
border:1px solid #777;
padding:10px;
}
.cplan-section .products .title1,
.cplan-section .products .col1 { flex-basis:40%; }
.cplan-section .products .title2 { flex-basis:60%; }
.cplan-section .products .col2,
.cplan-section .products .col3 { flex-basis:30%; }
#media (max-width:479px) {
.cplan-section .products {
flex-direction:row;
flex-wrap:wrap;
}
.cplan-section .products div[class^="title"],
.cplan-section .products div[class^="col"] { flex-basis:100%; }
.cplan-section .products .title1,
.cplan-section .products .col1 { order:-2; }
.cplan-section .products .title2 { order:-1; }
}
That's ok, but, what about when we stack elements in a mobile/responsive view? They will be badly organized.
Ok, by default every flex element contained has a 0 'order' value, and they stack for rendering in order of appearance. So if I modify that property for the first 3 elements, that should do it.
Take a look at the bottom of the CSS code.
And this is how viewport 479px and under should look:
Fiddle: https://jsfiddle.net/Dethdude/ch0mrgbe/23/

Multiple Sticky Headers - CSS / JavaScript / AngularJS

I tried to find some solution for the following scenario:
Header height is all different
Mouse scroll down
Fixed headers
Does anyone know how to make multiple sticky headers like this?
(1) init
(2) scroll down (using mouse)
(3) scroll down (using mouse)

hmm...
DEMO
$(window).scroll(function() {
var $headers = $(".header");
var scrollTop = $(this).scrollTop();
if (scrollTop <= 0) {
// reset all
$headers.css({
position: "relative",
top: "0px"
});
} else {
$headers.each(function(index, $el) {
var $curHeader = $($headers).eq(index);
var curTop = $curHeader.offset().top;
var curHeight = $curHeader.height();
// scroll up
var isRelative = ($el.isFixed && scrollTop <= $el.exTop);
// scroll down
var isFixed = (curTop <= scrollTop);
var position = "";
var top = 0;
if (isRelative) {
// reset
positon = "relative";
top = 0;
$el.isFixed = false;
} else if (isFixed) {
position = "fixed";
if (0 < index) {
for (var i = 0; i < index; i++) {
top += $($headers).eq(i).height();
}
}
scrollTop += curHeight;
if (!$el.isFixed) {
$el.isFixed = true;
$el.exTop = curTop;
}
}
$($el).css({
position: position,
top: top + "px"
});
});
}
});
body {
height: 10000px;
}
div {
height: 200px;
background: gray;
width: 100%;
}
.header {
height: 50px;
background: green;
}
div.header:nth-child(7) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>content 0</div>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

Here is a simple example:
I'm calculating the height of the headers and setting the top property.
DEMO
$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
$headers.each(function (index, el) {
var height = 0;
if (index == 0) {
height = "0px";
} else {
for ( var x = index - 1; x >= 0; x--) {
height += $headers.eq(x).height();
}
}
height = height + "px";
$(el).css({
"position": "fixed",
"top": height
});
});
} else {
$headers.css({
position: "relative",
top: "0"
});
}
});
body {
height: 10000px;
}
div {
height: 100px;
background: green;
width: 100%;
}
.header {
height: 50px;
background: red;
}
.header:first-child {
height: 20px;
}
div.header:nth-child(5) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

With only css
Codepen-FollowMe Headers
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
height: 10rem;
}
.second {
height:50px;
background:blue;
height: 10rem;
}
.third {
height:50px;
background:green;
height: 10rem;
}
.stickyContainer {
.sticky {
position: sticky;
top: 0;
height: 2rem;
background: white;
}
}
<div class="first stickyContainer">
<div class="sticky"><h1>1</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="second stickyContainer">
<div class="sticky"><h1>2</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="third stickyContainer">
<div class="sticky"><h1>3</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Align divs with p external to those divs

I have a div with some p's inside and want to put buttons to the side of some p's. Only some of the buttons show up, and I will control which ones through Javascript. Usually, I would put each p in a different wrapper div, which would also contains the corresponding button. BUT I want a background image around all p's, so I need to put all p's inside the same div and can't have separate div's for each p. I also don't want the background to appear around the buttons, which will be round. How do I align the buttons with the p's? Should I use jQuery to get the top properties of each p and pass them on to the buttons?
JS fiddle: http://jsfiddle.net/bw22yht1/
HTML:
<body>
<div class="content">
<div class="p-wrapper">
<!--there is a background image here-->
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
</body>
CSS:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
}
.p-wrapper
{
background-image:url('bg/old-paper-texture.jpg');
background-size:cover;
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
}
actual page: http://cin.ufpe.br/~rvcam/map/
EDIT: An image that shows what I need:

I took a look to your page, and you simply need to change your approach
<div class="content">
<ol class="p-wrapper">
<!--there is a background image here-->
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
</ol>
</div>
You'll have what you need AND no need for that additional span, you'll have automatic numering
EDIT: See code below to fit your needs.
HTML mostly remains the same, just change <ol class="p-wrapper"> to <ol class="bible"> and add buttons
<div class="content">
<ol class="bible">
<!--there is a background image here-->
<li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>
</ol>
</div>
CSS as follows:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
background:url('bg/old-paper-texture.jpg') repeat-y;
background-size:700px; /* your current .bible width */
}
.bible
{
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
color: white;
/*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}
Then you'll need some adjustments to fit your taste, but this will work just as you want

You can absolutely position a <div> with white background containing the <button> aside the <p> in a common <div> as follows:
<div class="demo">
<p>lorem ipsum lorem ipsum</p>
<div class="right">
<button>Button</button>
</div>
</div>
<div>'s are transparent by default so having a common parent <div> won't hide the background of the wrapper.
You can then align the button using following:
CSS:
p {
margin-right:200px;
}
.demo {
position:relative;
}
.right {
position:absolute;
top:0;
bottom:0;
right:0;
width:200px;
background:white;
}
.demo button {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100px;
height:20px;
margin:auto;
}
Demo

Show and Hide the content using a link

I am trying to display a content DIV with a link of expand and collapse.
In my content DIV there is a unorder list. when the page is open I want to display only two list item with a expand link. If user need to view other list item they need to click on expand link. After expand the DIV link text must be change to Collapse. And also if in my unorder list have only 2 items then no need to display a link.
NOTE: unorder list is generating dynamically using PHP.
My HTML is something like this -
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p>+ View More<p>
</div>
My Jquery -
$("a").click(function(){
$("#mycontent").toggle();
});
This is my code so far - http://jsbin.com/mojuteve/1/edit
Can anybody tell me how can I do this?
Thank You.

$(function() {
$("#mycontent li:gt(1)").hide(); // Initially show only first two items
if ($("#mycontent li").length <= 2) {
// Hide "View More" if there are no more to show
$("#showmore").hide();
}
$("#showmore").click(function() {
$("#mycontent li:hidden").slideDown();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
$("#collapse").click(function() {
$("#mycontent li:gt(1)").slideUp();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
});
Use the following HTML:
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p><a id="showmore" href="#">+ View More</a>
<a id="collapse" href="#">- Collapse</a><p>
</div>
And CSS:
#collapse {
display:none;
}

Try this fiddle: http://jsfiddle.net/Bn92C/2/
The code you should use, it will toggle the text within the "a"
$(function(){
$(".mycontent").hide();
$("a").click(function(){
$(".mycontent").slideToggle("fast");
$(this).toggleClass("more");
if($("a").hasClass("more")) {
$("a").text("- View Less");
} else {
$("a").text("+ View More");
}
});
});

How about this:
CSS:
#mycontent {
background: #fff;
overflow: hidden;
}
#mycontent > ul {
display: block;
width: 400px;
}
#mycontent > ul > li {
display: inline-block;
padding: 0 20px 10px 0;
}
#mycontent > ul > li + li + li {
display: none;
}
#mycontent p {
float: right;
padding: 0 20px;
}
#mycontent.visible ul > li {
display: inline-block;
}
jQuery:
//Check if the list items are less than 3 and if so remove the more link
(function () {
var listLenght = $('#mycontent ul li').length;
if (listLenght < 3) {
$('#mycontent a').remove();
}
})();
//Variable for the text change
var linkText = ['+ View More', '- Collapse'];
$('a').on('click', function (e) {
e.preventDefault();
var $this = $(this);
// Better practice to toggle classes instead of using show/hide
$('#mycontent').toggleClass('visible');
//Text Change
if($this.text() === linkText[0]){
$this.text(linkText[1]);
}else{
$this.text(linkText[0]);
}
})
But checking if the list length is 2 or less will be better to be done with php not js.
Demo

Develop Reference

JavaScript is the programming language of the Web.

Show and hide element through Javascript - javascript

Related

ON OFF by the generated button does not work

Equal height column across two divs

Multiple Sticky Headers - CSS / JavaScript / AngularJS

Align divs with p external to those divs

Show and Hide the content using a link

Categories

Resources