Image grid with single description field, changeable on click - javascript

What I am trying to create is a a grid of images with one single text field below the grid. That field is supposed to contain the description of whatever image has last been clicked on. I implemented the grid as a div containing several floating divs with the respective images, like this. Though I suspect the exact implementation isn't the most important part here:
HTML:
<div id="ingredient-showcase">
<div class="ingredient"><img src="..." alt="..." /></div>
<div class="ingredient"><img src="..." alt="..." /></div>
<div class="ingredient"><img src="..." alt="..." /></div>
...
</div>
CSS:
#ingredient-showcase {
margin: auto;
width: 90%
}
.ingredient {
border: 1px solid #ccc;
height: 170px;
width: 170px;
float:left;
padding: 5px;
}
So what would be a good way to implement the dynamic description box? Will pure HTML/CSS suffice for that (I suspect not) or will javascript/jquery be required? I suppose you could simply put all the decriptions in a single box with the exact same position and then just change the respective z-indices with every click. But I'm not sure if that would be the best practice or even work out at all.
I haven't found any answer to this while browsing the web so far, so if this hasn't been answered already I hope it will also be helpful to other people.

Really easy using jQuery. You could store the text to display in an element or even an alt or data- attribute on the img tag, then take that text and populate your div at the bottom.
$('.ingredient').on('click',function() {
$('#caption').html($(this).find('.meta').html())
})
.meta {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ingredient-showcase">
<div class="ingredient"><img src="..." alt="..." />
<div class="meta">1</div>
</div>
<div class="ingredient"><img src="..." alt="..." />
<div class="meta">2</div>
</div>
<div class="ingredient"><img src="..." alt="..." />
<div class="meta">3</div>
</div>
<div id="caption"></div>
</div>

Don't do the z-index thing. Just use JavaScript or jquery to populate the box with the descriptions. You can either pull the description from the alt tag or add a data attribute containing the description and pull it from there, like this:
<div id="ingredient-showcase">
<div class="ingredient"><img src="..." data-description="..." /></div>
...
</div>
<div id="description"></div>
Now in jquery you can just do something like this:
$(function () {
$('.ingredient > img').click(function () {
$('#description').text($(this).data('description'));
});
});

var TMP_IMG_URL = "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png";
var $grid = $('#grid');
var $description = $('#description');
var columns = 3;
var items = [{
src: TMP_IMG_URL,
description: "Adipisicing nobis nihil et in velit minima Expedita quasi mollitia exercitationem non porro Nulla consectetur natus aspernatur officiis iure! Veritatis ullam excepturi repellendus consequuntur magni! Exercitationem laudantium praesentium sed facilis.",
alt: "I've no idea what alt is."
},
{
src: TMP_IMG_URL,
description: "Consectetur quasi cum sit voluptates perspiciatis? Nobis aliquam corporis molestias pariatur nobis Repudiandae eaque fuga veritatis quaerat eligendi accusantium. Amet facilis quaerat nemo laboriosam aliquid? Labore eum accusantium molestiae nobis.",
alt: "I've no idea what alt is."
},
{
src: TMP_IMG_URL,
description: "Adipisicing nobis nihil et in velit minima Expedita quasi mollitia exercitationem non porro Nulla consectetur natus aspernatur officiis iure! Veritatis ullam excepturi repellendus consequuntur magni! Exercitationem laudantium praesentium sed facilis.",
alt: "I've no idea what alt is."
},
{
src: TMP_IMG_URL,
description: "Sit magnam nobis voluptas eos adipisci. Aspernatur neque explicabo saepe amet ad sint Ex laborum ullam veritatis obcaecati debitis Ab laudantium quo facilis delectus excepturi fugiat. Perspiciatis maiores atque saepe?",
alt: "I've no idea what alt is."
},
{
src: TMP_IMG_URL,
description: "Consectetur non quibusdam adipisci sequi velit Voluptas architecto aliquid quis iusto fugit Voluptas porro ullam vitae quae iste, iusto? Id fugiat harum sit quis nisi eos Laborum similique id reprehenderit!",
alt: "I've no idea what alt is."
},
{
src: TMP_IMG_URL,
description: "Sit culpa animi aperiam totam iusto odit Suscipit quia molestiae sunt amet ut Veniam fugit qui atque explicabo repellendus debitis? Libero atque in ut earum pariatur Libero nemo quae beatae?",
alt: "I've no idea what alt is."
}
];
$description.text(items[0].description);
var $row;
items.forEach(function(item, index) {
if (index % columns === 0) {
$row = $('<div class="row">');
$grid.append($row);
}
var $column = $('<div class="column">');
var $img = $('<img alt="' + item.alt + '" src="' + item.src + '">');
$column.append($img);
$column.css({
width: 100 / columns + '%',
float: 'left'
});
$column.click(function() {
$description.text(items[index].description);
});
$row.append($column);
// console.log(index, item);
});
var $row = $('<div>');
* {
box-sizing: border-box;
}
#over {
width: 80%;
margin: 20px auto;
}
.grid {
display: block;
}
.row {
overflow: hidden;
display: block;
}
.column {
border: none;
display: block;
}
.description {
font-size: 12px;
}
img {
width: 100%;
padding: 3px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="over">
<div id="grid" class="grid"></div>
<div id="description" class="description"></div>
</div>
<!-- grid is gonna be like this
<div class="grid">
<div class="row">
<div class="column"><img src="" alt=""></div>
<div class="column"><img src="" alt=""></div>
<div class="column"><img src="" alt=""></div>
<div class="column"><img src="" alt=""></div>
</div>
</div>
-->

#ingredient-showcase {
margin: auto;
width: 90%
}
.ingredient {
border: 1px solid #ccc;
height: 170px;
width: 170px;
float: left;
padding: 5px;
}
#description {
clear: both;
padding: 5px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div id="ingredient-showcase">
<div class="ingredient" ng-click="description = 'description 1'">
<img src="..." alt="...">
</div>
<div class="ingredient" ng-click="description = 'description 2'">
<img src="..." alt="..." />
</div>
<div class="ingredient" ng-click="description = 'description 3'">
<img src="..." alt="..." />
</div>
...
</div>
<p id="description">{{ description }}</p>
</div>

Maybe with angular.js ?
var app = angular.module('app', []);
app.controller('IngredientController', function($scope) {
$scope.description = '';
$scope.setDescription = function(description) {
$scope.description = description;
};
$scope.ingredients = [{
src: "...",
alt: "...",
description: "description 1"
},
{
src: "...",
alt: "...",
description: "description 2"
},
{
src: "...",
alt: "...",
description: "description 3"
}
];
});
* {
box-sizing: border-box;
}
#over {
text-align: center;
}
#ingredient-showcase {
margin: auto;
display: block;
width: 90%;
overflow: hidden;
text-align: center;
}
.ingredient {
border: 1px solid #ccc;
display: inline-block;
height: 170px;
width: 170px;
float: left;
padding: 5px;
}
.ingredient img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" id="over" ng-controller="IngredientController">
<div id="ingredient-showcase">
<div class="ingredient" ng-repeat="ingredient in ingredients" ng-click="setDescription(ingredient.description)">
<img ng-src="{{ ingredient.src }}" alt="{{ ingredient.alt }}" />
</div>
</div>
<div>{{ description }}</div>
</div>

Related

How to set collapse on all other divs when one div is open?

I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>
Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>

Render only selected element, React JS

I am trying to toggle class in one of my react component.
The idea is to add class when the mouse enter and to remove the class when the mouse leave only in the element only the element in where the user perform the actions. However this is not the case as when the action is being performed all the element with the function are behaving equally.
This is my code so far:
export default class Projects extends Component{
constructor(){
super();
this.state = {
isHovered : false
}
}
//handle mouse enter
handleMouseEnter = () =>{
this.setState({
isHovered : true
});
}
//handle mouse leave
handleMouseLeave = () =>{
this.setState({
isHovered : false
});
}
//render component
render(){
let display = "";
if(this.state.isHovered === true){
display = "active";
}else{
display = "disable";
}
return(
<section className="projects">
{/*section project wrapper*/}
<div className="p-wrapper">
<h1 className="title">Projects</h1>
<hr/>
{/*projet wrapper*/}
<div className="projects-wrapper">
{/*project item wrapper*/}
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/fma_web.png" alt="FMA Web Development"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Web development using php*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/web_dev_php.png" alt="FMA Web Development Using PHP"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Movie Catalog*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/movie_catalog.png" alt="Movie Catalog"/>
</div>
</div>
</div>
</div>
</section>
);
}
}
I have read the use of key in the documentation and read other question especially this one LINK,however when I try to implement I do not get the desired result.
===========================
EDIT
This is what I get now.
As you can see when I hover both of the element triggers.
This is my CSS Code:
/*Projects Start*/
.projects{
width: 100%;
}
.p-wrapper{
margin: 0 auto;
width: 90%;
height: 100%;
}
.projects-wrapper{
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.project-item{
margin: 1rem;
width: 30%;
position: relative;
box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(43, 40, 40, 0.61);
color: white;
}
.p-description p {
margin: 1rem;
}
.p-title{
margin: 1rem;
}
.active{
display: block;
transition: all 2s ease-in;
}
.disable {
display: none;
}

Dynamic Side Nav Bar

I am a newbie.
I want to build a side navigation bar like available here and here.
As of now, I am able to build a dynamic navigation bar as shown here, though it is not a proper side navigation bar.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
$(".menu-button").click(function(){
$(".side-nav-menu").toggle(100);
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-0">
<div>
<a class="btn btn-default menu-button transparent-btn">
<i class="fa fa-bars fa-2x"></i>
<i class=""></i>
</a>
</div>
<div class="side-nav-menu btn-group-vertical" style="display:none">
<button class="btn btn-default transparent-btn btn-lg text-left">About</button>
<button class="btn btn-default transparent-btn btn-lg text-left">Schedule</button>
<button class="btn btn-default transparent-btn btn-lg text-left">Venue</button>
<button class="btn btn-default transparent-btn btn-lg text-left">Speakers</button>
<button class="btn btn-default transparent-btn btn-lg text-left">Contacts</button>
</div>
</div>
</div>
<div>
</body>
I even checked this w3schools website to build the same, but wasn't successful, as explanation is quite difficult.
Can anybody help me out with this?
What if you try this?
.btn-group-vertical {
display: inline-block;
position: absolute;
vertical-align: middle;
z-index: 1;
}
Making the menu positioned absolutely, then adding a z-index so it stays in front.
Its called an off-canvas navigation:
The CSS is:
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #111;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
border-top: 1px solid #111;
border-bottom: 1px solid #000;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #c74438;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-color: white; /* Needs a background or else the nav will show through */
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
/* non-critical apperance styles */
padding: 4em;
background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
background-size: 200%;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
body {
/* Without this, the body has excess horizontal scroll when the menu is open */
overflow-x: hidden;
}
/* Additional non-critical styles */
h1, h3, p {
max-width: 600px;
margin: 0 auto 1em;
}
code {
padding: 2px;
background: #ddd;
}
/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
The HTML to be used is:
<ul class="navigation">
<li class="nav-item">Home</li>
<li class="nav-item">Portfolio</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="site-wrap">
<h1>Pure CSS Off-Screen Menu</h1>
<h3>Finally, an off-screen menu that doesn't require a bunch of Javascript to work. </h3>
<p>This concept relies on the <code>:checked</code> pseudo-selector as well as the general sibling <code>~</code> selector, so it has decent browser support.</p>
<p><strong>Browsers supported:</strong> IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium! Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
<p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat, pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
<p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
<p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
<p>Demo by Austin Wulf. See article.</p>
</div>
DEMO AVAILABLE ON http://codepen.io/SitePoint/pen/uIemr

Javascript Tabs Accordion Issue

I have created a tabs accordion which is working properly. However their behaviour is not as i want it to be. At the current tabs accordion when i press one of the tabs it will show the content inside it, and when i press another tab it will open also. What i would like to have happen is when i click one of the tabs to be the only one that is showing and the rest of the tabs to be closed. Hope someone can help me to add that extra code that i need to make it work.
var tabsContainer = document.getElementById("tabsContainer");
var tabUl = document.getElementById("tabs-ul");
var tabOne = document.getElementById("tab-one");
var tabTwo = document.getElementById("tab-two");
var tabThree = document.getElementById("tab-three");
var tabOneContent = document.getElementById("tab-one-content");
var tabTwoContent = document.getElementById("tab-two-content");
var tabThreeContent = document.getElementById("tab-three-content");
function openTabOne() {
if (tabOneContent.className == "toggleTab") {
tabOneContent.className = "";
} else {
tabOneContent.className = "toggleTab";
}
}
function openTabTwo() {
if (tabTwoContent.className == "toggleTab") {
tabTwoContent.className = "";
} else {
tabTwoContent.className = "toggleTab";
}
}
function openTabThree() {
if (tabThreeContent.className == "toggleTab") {
tabThreeContent.className = "";
} else {
tabThreeContent.className = "toggleTab";
}
}
tabOne.addEventListener("click", openTabOne);
tabTwo.addEventListener("click", openTabTwo);
tabThree.addEventListener("click", openTabThree);
* {
padding: 0px;
margin: 0px;
}
body {
font-family: sans-serif;
font-weight: 14px;
background: silver;
}
#tabsContainer {
width: 50%;
margin: 0 auto;
border: 3px solid #a70d89;
padding: 20px;
box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77);
;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding: 5px 20px;
background: #4c99ac;
color: #7910c6;
cursor: pointer;
}
#tabsContainer > div {
margin: 20px 0px;
display: none;
}
#tab-one-content.toggleTab,
#tab-two-content.toggleTab,
#tab-three-content.toggleTab {
display: block;
}
<div id="tabsContainer">
<ul id="tabs-ul">
<li id="tab-one">Tab One</li>
<li id="tab-two">Tab Two</li>
<li id="tab-three">Tab Three</li>
</ul>
<div id="tab-one-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
<div id="tab-two-content">
Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
<div id="tab-three-content">
Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
</div>
You need to remove the class from the tabs that you don't want open anymore, here is a possible way to do it.
var tabsContainer = document.getElementById("tabsContainer");
var tabUl = document.getElementById("tabs-ul");
var tabOne = document.getElementById("tab-one");
var tabTwo = document.getElementById("tab-two");
var tabThree = document.getElementById("tab-three");
var tabPanels = [
document.getElementById("tab-one-content"),
document.getElementById("tab-two-content"),
document.getElementById("tab-three-content")
];
function showTab(tabIndex) {
for(var i = 0; i < tabPanels.length; i++) {
tabPanels[i].className = i == tabIndex ? 'toggleTab' : '';
}
}
function openTabOne() {
showTab(0);
}
function openTabTwo() {
showTab(1);
}
function openTabThree() {
showTab(2);
}
openTabOne();
tabOne.addEventListener("click", openTabOne);
tabTwo.addEventListener("click", openTabTwo);
tabThree.addEventListener("click", openTabThree);
* {
padding:0px;
margin:0px;
}
body {
font-family: sans-serif;
font-weight: 14px;
background:silver;
}
#tabsContainer {
width:50%;
margin:0 auto;
border:3px solid #a70d89;
padding:20px;
box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77);;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding:5px 20px;
background:#4c99ac;
color:#7910c6;
cursor: pointer;
}
#tabsContainer > div {
margin: 20px 0px;
display: none;
}
#tab-one-content.toggleTab, #tab-two-content.toggleTab, #tab-three-content.toggleTab {
display: block;
}
<div id="tabsContainer">
<ul id="tabs-ul">
<li id="tab-one">Tab One</li>
<li id="tab-two">Tab Two</li>
<li id="tab-three">Tab Three</li>
</ul>
<div id="tab-one-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
<div id="tab-two-content">
Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
<div id="tab-three-content">
Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium.
</div>
</div>

how to add child div background image and applied to entire parent section

how to add child div background image and applied to entire parent section.Means i have section as parent class with child div.
.section-bg{
padding-top:35px;
background: transparent url('../../assets/images/bg-page-img1.png') repeat scroll 0px 0px ;
background-attachment: fixed;
}
<section class="bet-section inner-section " style="">
<div class="section-bg"></div>
<div class="row">
<div class="col-md-5 col-md-offset-1 image-right-pad">
<img src="./assets/images/img-content/th-1.jpg">
</div>
<div class="col-md-6 content">
<h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2>
<br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p>
</div>
</div>
</section>
$(document).ready(function(){
$(".section-bg").parent().css("background-image",
+ $(".section-bg").css("background-image"));
});
i don't understand why you want this ? you can write with CSS or inline CSS the background-image to the parent
also , in your CSS you set the background-attachment:scroll and then you overwrite it in the next line with background-attachment:fixed . that's not correct. choose one :)
my only guess is that you want to change the background-image of the parent depending on what background-image the child has. so you could do something like this
see snippet :
let me know if it helps .
var bck = $(".section-bg").css("background-image")
$(".bet-section").css("background-image", bck);
.section-bg{
padding-top:35px;
background: transparent url('http://beerhold.it/579/300') no-repeat scroll 0px 0px ;
}
.bet-section {
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="bet-section inner-section " style="">
<div class="section-bg"></div>
<div class="row">
<div class="col-md-5 col-md-offset-1 image-right-pad">
<img src="./assets/images/img-content/th-1.jpg">
</div>
<div class="col-md-6 content">
<h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2>
<br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p>
</div>
</div>
</section>
or without JQ you could simply do this . this would be the logical way to do it.
.bet-section {
background: transparent url('http://beerhold.it/579/300') no-repeat scroll 0px 0px ;}
.section-bg{
padding-top:35px;
}
<section class="bet-section inner-section " style="">
<div class="section-bg"></div>
<div class="row">
<div class="col-md-5 col-md-offset-1 image-right-pad">
<img src="./assets/images/img-content/th-1.jpg">
</div>
<div class="col-md-6 content">
<h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2>
<br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p>
</div>
</div>
</section>
or you could just write inline like this :
<section class="bet-section inner-section " style="background-image:url('image url')">

Categories

Resources