Develop Reference

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

Image grid with single description field, changeable on click

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>

How do I make the box below move ( accordion )

Didn't really know how to explain my problem in the title, my question is how do I make it so when I press the top box the other two boxes move down so you can see the text? The same goes for the other two boxes, if I press the middle the last box moves and when I press the last one the top and the middle stays. Plus the boxes has to go back to it's original place. Please I need help with this
$(".faq,.faq2,.faq3").click(function() {
$(this).find(".faq-box-more").toggleClass("open");
$(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});
.faq,
.faq2,
.faq3 {
height: 100px;
width: 500px;
background: red;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
position: absolute;
height: 0%;
top: 100%;
background-color: #222;
color: #fff;
width: 100%;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
.open {
height: 140% !important;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq2">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq3">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>

see snippet below or jsfiddle
if you don't want to use the jqueryUI accordion and want to learn how it actually works, it's something like this
in CSS do not use absolute positioning on faq-box-more as it won't occupy any space. instead hide it with display:none
for JQ
first, you don't need to add different classes to all the faq divs, you can add one common class and then select the respective faq-box-more connected to the faq you click on , using jQuery methods below
when you click on faq-box ( either one of them ) , in a variable ( for cleaner and concise code ) you store the corresponding faq-box-more .
you do this by using sibling() method. searching .faq-box's ' brothers ' for the .faq-box-more . in HTML structure faq-box and faq-box-more are on the same level, therefore they are siblings
then using an if condition you check if the previous selected faq-box-more is visible or not. IF YES -> close it , IF NO -> open IT .
you close and open using slideUp() and slideDown() methods ( click on the methods to see more info about them )
then, you also want to find any previous opened faq-box-more and close them, so only one is opened at one time ( the one corresponding to the box you clicked on ) . to do this you use the parents() method to 'climb' up the HTML structure and get to faq and then using siblings() and find() you find the .faq-box-more , and if it is open, you hide it with slideUp()
i think it's important that you try to understand the process behind the accordion and not just copy-paste it .
if you have anymore questions on this subject, feel free to ask in the comments
P.S. you had many problems in your code ( CSS ), it tried to correct some of them but also i wanted not to change too much your code.
$(".faq-box").on("click",function() {
var boxMore = $(this).siblings(".faq-box-more")
if ($(boxMore).is(":visible")) {
$(boxMore).slideUp()
} else {
$(boxMore).slideDown(500)
}
$(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});
.faq {
width: 500px;
background: red;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
background-color: #222;
color: #fff;
width: 100%;
height:200px;
display:none;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>

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')">