Develop Reference

How can I add an active class if any Option buttons are selected?

I am trying to add active class to a Submit button provided any of the options from a button group is selected. For some reason I am not able to make it work.
https://jsfiddle.net/75ybncud
$('#optionbutton1').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeAttr('disabled');
$('#submitbutton').addClass('active');
});
$('#optionbutton2').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeAttr('disabled');
$('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="btn-group list-group" role="group" id="fabricList">
<button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 1</p>
</div>
</button>
<button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 2</p>
</div>
</button>
</div>
<div class="row my-4 mx-auto">
<a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
</div>
</div>

You have to remove class disabled using .removeClass() not attribute as it's a class on your button.
This is a class in bootstrap that disables the <button>/<a> tags:
$('#optionbutton1').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeClass('disabled');
$('#submitbutton').addClass('active');
});
$('#optionbutton2').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeClass('disabled');
$('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="btn-group list-group" role="group" id="fabricList">
<button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 1</p>
</div>
</button>
<button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 2</p>
</div>
</button>
</div>
<div class="row my-4 mx-auto">
<a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
</div>
</div>

div toggle with another divs

What I am trying to do here: Content 1 is in an active state when the page is open, and when "Open Map" is clicked, then Content 2 toggles with Content 1. It's the same for "Open Detail" too, and also when I close map or detail then Content 1 need to display again...
Additionally, for example after opening detail, and then opening map they need to toggle with each other. No need to display at the same time. And Content 1 needs to display again when 2 or 3 are closed...
$('#show-detail').on('click', function(event){
event.preventDefault();
$('.content3').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-detail').html('Close Detail');
} else {
$('#show-detail').html('Open Detail');
}
});
});
$('#show-map').on('click', function(event){
event.preventDefault();
$('.content2').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-map').html('Close map');
} else {
$('#show-map').html('Open map');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>

$('#show-detail').on('click', function(event){
event.preventDefault();
toggleViews('content3');
});
$('#show-map').on('click', function(event){
event.preventDefault();
toggleViews('content2');
});
function toggleViews(elmClass) {
var elm = $("." + elmClass);
var isVisible = elm.is(':visible');
$(".tabs-stage > div:visible").slideUp('slow', function() {
if(isVisible) {
$(".content1").slideDown();
} else {
elm.slideDown();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>

Add new boostrap 4 card dynamicly

I would know in js how to add dynamicly a new card. The code below allow to remove a card but not to add new.
I started something like that, but I am blocked.
The html code example
The card
<div class="container">
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" onClick="addAnother()" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element2">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
the script>
Remove a card
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
Add a card ==> this is element is not correct must be included the card code I think
<script>
addAnother = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var children = ul.children.length + 1
li.setAttribute("id", "element"+children)
li.appendChild(document.createTextNode("Element "+children));
ul.appendChild(li)
}
</script>

You could attach a click event using the id #insert, as you have with the close action, rather than referencing a function inline.
$('#insert').click(function(){
$( "ul#list" ).append( "<li>any html here</li>" );
});

How can I show/hide extra divs depending on data value set?

I have some JavaScript (Jquery) that will show a set amount of div's depending on the data arbitrate in the html.
If attribute set to 3 it will show 3 div's and clicking 'show more' will show all div's
It needs to do this for multiple sections, each with their own data attribute and only show or hide the divs that belong to the section clicked.
My current problem is that all sections are being shown on click and then vanishing as soon as they appear.
The desired effect is to have each section hide and show based on the click individually.
var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
'use strict';
//variables
var _sectorPageStrengths = $('.sectorpage-strengths'),
_elements = 0,
// methods
init,
_bindShowMore, _bindShowLess,
_adjustHeigt, _checkElemnt, equalHeight;
_checkElemnt = function($element) {
var _vp = INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
};
_bindShowMore = function(container) {
// if data-items, data-infinite is defined, used it
var _showMore = $('.view-all-sectors-btn');
_showMore.on('click', function() {
$('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
});
};
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function() {
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top - 35
}, 700);
});
};
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(_sectorPageStrengths);
_bindShowLess();
$(window).on('load', function() {
equalHeight();
});
}
});
$("#loadPDFComponentModal").on('hidden.bs.modal', function() {
$("#hiddenIframe").html("");
});
};
return {
init: init
};
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

You are listening all the 'view more' button click in your code. so it causing problem.
Update code
code should handle individual container. The file changes are,
_checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
$element.find('.marg1').slice(0,count).each(function(index, ele){
$(ele).attr('data-display', true).show();
});
};
and
_bindShowMore = function(container) {
var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
$(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
$(this).text(isAllVisible ?'view more' : 'view less');
if(isAllVisible){
console.log('isAllVisible', isAllVisible); // you handle some other action here if required
}
});
};
and
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(element);
// _bindShowLess(); this behaviour handled in bindShowMore itself
$(window).on('load', function() {
equalHeight();
});
}
});
i hope this will help you.

Here I bypass your code to just provide the simplest answer to the actual issue. I will leave it to you to work that in your code.
NOTE If you choose to not use a class you can do .toggle(true); instead of .toggleClass('hidden', true);
I used a class to simplify the original HTML.
$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
var sect = $(event.delegateTarget);
var sectCount = sect.data('desktop');
var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
strengths.toggleClass('hidden', false);
var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
strengths.slice(0, showCount).toggleClass('hidden', true);
$(this).toggleClass('hidden', true);
$(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});
.sectorpage-strengths .marg1 {
border: solid lime 1px;
}
.yellow-container {
height: 140px;
background-color: #FFFFE0;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main1</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main2</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

How to select data from DIV's with something like $this?

given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>

The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>

Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example

Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());