Multiple button select scenarios - javascript

I have multiple scenarios if a specific buttons is selected. How can I reselect by clicking the button again?
SCENARIOS
(1) training only
(2) travel out NCR only
(3) travel out PH only
(4) training + travel out NCR
(5) training + travel out PH
Here's my code so far
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()" id="training"
name="training" value="training">
<i class="fas fa-book fa-2x"></i>
<p>Training or Seminar</p>
</button>
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()"
id="outsideNcr" name="outsideNcr" value="outsideNcr">
<i class="fas fa-bus-alt fa-2x"></i>
<p>Travel outside NCR</p>
</button>
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()" id="outsidePh"
name="outsidePh" value="outsidePh">
<i class="fas fa-plane-departure fa-2x"></i><br>
<p>Travel outside PH</p>
</button>
<script>
function selectReimbursementType(x) {
var element = document.getElementById(x);
var currentValue = document.getElementById(x).value;
if(currentValue == 'training') {
element.classList.add('is-active');
} else if(currentValue == 'outsideNcr') {
element.classList.add('is-active');
document.getElementById('outsidePh').setAttribute('disabled', true);
} else if(currentValue == 'outsidePh') {
element.classList.add('is-active');
document.getElementById('outsideNcr').setAttribute('disabled', true);
}
}
</script>
https://jsfiddle.net/oy0zh4ws/2/


I used the toggle() and toggleAttribute() methods.
Just use this js code:
function selectReimbursementType(x) {
var element = document.getElementById(x);
var currentValue = document.getElementById(x).value;
var ncr = document.getElementById('outsidePh');
var ph = document.getElementById('outsideNcr');
if(currentValue == 'training') {
element.classList.toggle('is-active');
} else if(currentValue == 'outsideNcr') {
element.classList.toggle('is-active');
ncr.toggleAttribute('disabled');
} else if(currentValue == 'outsidePh') {
element.classList.toggle('is-active');
ph.toggleAttribute('disabled');
}
}


Use element.classList.toggle to toggle class.
Rest disabled state of elements and set again based on condition.
Try it below.
function selectReimbursementType(x) {
var element = document.getElementById(x);
var currentValue = document.getElementById(x).value;
// toggle elements is-active class.
element.classList.toggle('is-active');
// reset disabled
document.getElementById('outsideNcr').removeAttribute('disabled');
document.getElementById('outsidePh').removeAttribute('disabled');
// set disabled button
if (currentValue == 'outsideNcr' && element.classList.contains('is-active')) {
document.getElementById('outsidePh').setAttribute('disabled', true);
}
if (currentValue == 'outsidePh' && element.classList.contains('is-active')) {
document.getElementById('outsideNcr').setAttribute('disabled', true);
}
}
html {
font-size: 14px;
font-family: 'Nunito', sans-serif;
}
.reimbursement-buttons.preview-btn {
margin-top: 20px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
color: #ffffff;
}
.footer {
background: #7f7f7f;
padding: 10px 0px;
}
.reimbursement-card p {
font-size: 12px;
margin-bottom: 0;
}
.reimbursement-card .btn.is-active {
background: #32c5ff;
color: #ffffff;
content: "\f058";
}
.reimbursement-card .btn:hover {
background: #32c5ff;
color: #ffffff;
}
.reimbursement-card .btn:disabled:hover {
background: none;
color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="d-flex justify-content-center form-row">
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('training')" id="training" name="training" value="training">
<i class="fas fa-book fa-2x"></i>
<p>Training or Seminar</p>
</button>
</div>
</div>
</div>
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('outsideNcr')" id="outsideNcr" name="outsideNcr" value="outsideNcr">
<i class="fas fa-bus-alt fa-2x"></i>
<p>Travel outside NCR</p>
</button>
</div>
</div>
</div>
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('outsidePh')" id="outsidePh" name="outsidePh" value="outsidePh">
<i class="fas fa-plane-departure fa-2x"></i><br>
<p>Travel outside PH</p>
</button>
</div>
</div>
</div>
</div>


is-active class has CSS and when a button is clicked then the button gets is-active class. So when the button re-clicked then the button gets same class twice. So easy approach is removing is-active class. As you suggested other below:
SCENARIOS (1) training only (2) travel out NCR only (3) travel out PH only (4) training + travel out NCR (5) training + travel out PH
These SCENARIOS can be reset by removing disabled attribute.
function selectReimbursementType(x) {
var element = document.getElementById(x);
var currentValue = document.getElementById(x).value;
function unSetOption() {
element.classList.remove('is-active')
document.getElementById('outsidePh').removeAttribute('disabled');
document.getElementById('outsideNcr').removeAttribute('disabled');
}
if (element.classList.contains('is-active')) {
unSetOption();
} else if (currentValue == 'training') {
element.classList.add('is-active');
} else if(currentValue == 'outsideNcr') {
element.classList.add('is-active');
document.getElementById('outsidePh').setAttribute('disabled', true);
} else if(currentValue == 'outsidePh') {
element.classList.add('is-active');
document.getElementById('outsideNcr').setAttribute('disabled', true)
}
}
html {
font-size: 14px;
font-family: 'Nunito', sans-serif;
}
.reimbursement-buttons.preview-btn {
margin-top: 20px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
color: #ffffff;
}
.footer {
background: #7f7f7f;
padding: 10px 0px;
}
.reimbursement-card p {
font-size: 12px;
margin-bottom: 0;
}
.reimbursement-card .btn.is-active {
background: #32c5ff;
color: #ffffff;
content: "\f058";
}
.reimbursement-card .btn:hover {
background: #32c5ff;
color: #ffffff;
}
.reimbursement-card .btn:disabled:hover {
background: none;
color: #000000;
}
<div class="d-flex justify-content-center form-row">
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('training')" id="training" name="training" value="training">
<i class="fas fa-book fa-2x"></i>
<p>Training or Seminar</p>
</button>
</div>
</div>
</div>
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('outsideNcr')" id="outsideNcr" name="outsideNcr" value="outsideNcr">
<i class="fas fa-bus-alt fa-2x"></i>
<p>Travel outside NCR</p>
</button>
</div>
</div>
</div>
<div class="p-3">
<div class="card">
<div class="card-body d-flex flex-column align-items-start reimbursement-card p-0">
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType('outsidePh')" id="outsidePh" name="outsidePh" value="outsidePh">
<i class="fas fa-plane-departure fa-2x"></i><br>
<p>Travel outside PH</p>
</button>
</div>
</div>
</div>
</div>

Related

Reinitialize search after first round of results

In my code I have an input field with a 'Clear' button and a 'Search' button.
The Clear button removes the counters, empties the input field, remove highlights and hides showed collapsed items but does not reinitialize the search.
The problem is that I need to check if the input value is the same as before, otherwise I should start a new search.
How can I achieve this?
$(document).ready(function() {
// console.log(occurrences);
$(document).on("click", "#findWord", function(e) {
let occurrences = [];
e.preventDefault();
// clear();
let x = document.querySelector("#searchedWord").value;
let error = document.querySelector("#message");
if (x == "") {
error.style.display = "block";
error.style.color = "red";
} else {
error.style.display = "none";
highlightWord();
displayOcc();
}
// let clickInput = document.querySelector('#searchedWord');
let clickClear = document.querySelector("#clear");
// Make clear button to appear on input field click
// clickInput.addEventListener('input', function(){
// clickClear.style.display = 'block';
// });
clickClear.addEventListener("click", clear);
function clear() {
// get the search term from the input
let clickInput = document.querySelector("#searchedWord");
clickInput.value = "";
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function() {
spans.contents().unwrap();
});
occurrences.splice(0, occurrences.length);
// reset our labels
$("#count").html("");
$("#current").html("");
$(".timeline-compendium__content").collapse("hide");
$(".timeline-type .timeline-type__content").collapse("hide");
}
function highlightWord() {
// create a regex from our term
const word = document.getElementById("searchedWord").value;
const r = new RegExp("(" + word + ")", "ig");
$(".reports-list-item__title--compendium").each(function(i) {
if ($(this).text().match(r)) {
// console.log($(this).text().match(r));
// get all the matches
var matches = $(this).text().match(r);
// console.log(matches);
// loop through them
$.each(matches, function() {
// push the index of this section onto the array
occurrences.push(i);
// console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).text().replace(r, "<mark>$&</mark>"));
$(this).closest(".timeline-compendium__content").collapse("show");
// scroll to highlighted word(s)
// $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
$(this).closest('.timeline-type .timeline-type__content').collapse('show');
}
});
}
function displayOcc() {
let lengthOccurrences = occurrences.length;
console.log('Length (number) of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector("#current").textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? " of " + lengthOccurrences : " matches found";
// // set number of matches found
let count = document.querySelector("#count");
count.textContent = insertNbrOcc;
// // set number of currently viewed match
let nbrViewMatch = document.querySelector("#current");
nbrViewMatch.textContent = currViewMatch;
}
});
$("#btnNext").click(test);
var i = 0;
function test() {
var pickHighlights = document.querySelectorAll("mark");
var viewportOffset = pickHighlights[i].getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
window.scrollTo(0, top);
i++;
if (i >= pickHighlights.length) {
i = 0;
}
}
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input#findWord {
background-color: rgb(248, 211, 3);
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clear {
width: 25px;
height: 25px;
position: absolute;
top: 20px;
right: 150px;
line-height: 25px;
font-size: 14px;
padding-left: 8px;
font-weight: bold;
cursor: pointer;
color: #fff;
background-color: red;
border: none;
border-radius: 50%;
}
#message {
display: none;
font-size: 1em;
}
#btnNext {
margin-left: 0.5rem;
}
mark {
background-color: yellow !important;
}
.stickyBar {
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row stickyBar">
<div class="col-sm-12 mb-2">
<div id="searchForm" class="d-flex flex-column">
<label for="searchedWord">Search... </label>
<div class="col-sm-12 p-0 d-flex ">
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="cool" class="form-control form-control-lg" />
<button type="submit" id="findWord" class="btn btn-primary">Search</button>
<input type="button" id="btnNext" value="next" />
<div id="clear" role="button">X</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-2">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">1<sup>st</sup> collapsible item</div>
<div class="col"><span></span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">1</div>
<div class="col timeline-type__title">First nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">2<sup>nd</sup></div>
<div class="col"><span>collapsible item</span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type">
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">2</div>
<div class="col timeline-type__title">Second nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">3<sup>rd</sup></div>
<div class="col"><span>collapsible item</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">3</div>
<div class="col timeline-type__title">Third nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">4</div>
<div class="col timeline-type__title">Fourth nested collapsible
</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

You can clear the old mark and reset the i index when you click the Search button in the click handler of findword button. I added the code below.
//clear old marks
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
//reset i
i = 0;
$(document).ready(function () {
// console.log(occurrences);
var i = 0;
$(document).on("click", "#findWord", function (e) {
let occurrences = [];
e.preventDefault();
//clear old marks
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
//reset i
i = 0;
let x = document.querySelector("#searchedWord").value;
let error = document.querySelector("#message");
if (x == "") {
error.style.display = "block";
error.style.color = "red";
} else {
error.style.display = "none";
highlightWord();
displayOcc();
}
// let clickInput = document.querySelector('#searchedWord');
let clickClear = document.querySelector("#clear");
// Make clear button to appear on input field click
// clickInput.addEventListener('input', function(){
// clickClear.style.display = 'block';
// });
clickClear.addEventListener("click", clear);
function clear() {
// get the search term from the input
let clickInput = document.querySelector("#searchedWord");
clickInput.value = "";
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
occurrences.splice(0, occurrences.length);
// reset our labels
$("#count").html("");
$("#current").html("");
$(".timeline-compendium__content").collapse("hide");
$(".timeline-type .timeline-type__content").collapse("hide");
}
function highlightWord() {
// create a regex from our term
const word = document.getElementById("searchedWord").value;
const r = new RegExp("(" + word + ")", "ig");
$(".reports-list-item__title--compendium").each(function (i) {
if ($(this).text().match(r)) {
// console.log($(this).text().match(r));
// get all the matches
var matches = $(this).text().match(r);
// console.log(matches);
// loop through them
$.each(matches, function () {
// push the index of this section onto the array
occurrences.push(i);
// console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).text().replace(r, "<mark>$&</mark>"));
$(this).closest(".timeline-compendium__content").collapse("show");
// scroll to highlighted word(s)
// $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
$(this)
.closest(".timeline-type .timeline-type__content")
.collapse("show");
}
});
}
function displayOcc() {
let lengthOccurrences = occurrences.length;
console.log(
"Length (number) of occurrences is:" + " " + lengthOccurrences
);
let currViewMatch = Number(
document.querySelector("#current").textContent
);
console.log("Number of current viewed match is:" + " " + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch =
currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc =
lengthOccurrences > 0 ? " of " + lengthOccurrences : " matches found";
// // set number of matches found
let count = document.querySelector("#count");
count.textContent = insertNbrOcc;
// // set number of currently viewed match
let nbrViewMatch = document.querySelector("#current");
nbrViewMatch.textContent = currViewMatch;
}
});
$("#btnNext").click(test);
function test() {
console.log(i);
var pickHighlights = document.querySelectorAll("mark");
var viewportOffset = pickHighlights[i].getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
window.scrollTo(0, top);
i++;
if (i >= pickHighlights.length) {
i = 0;
}
}
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input#findWord {
background-color: rgb(248, 211, 3);
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clear {
width: 25px;
height: 25px;
position: absolute;
top: 20px;
right: 150px;
line-height: 25px;
font-size: 14px;
padding-left: 8px;
font-weight: bold;
cursor: pointer;
color: #fff;
background-color: red;
border: none;
border-radius: 50%;
}
#message {
display: none;
font-size: 1em;
}
#btnNext {
margin-left: 0.5rem;
}
mark {
background-color: yellow !important;
}
.stickyBar {
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row stickyBar">
<div class="col-sm-12 mb-2">
<div id="searchForm" class="d-flex flex-column">
<label for="searchedWord">Search... </label>
<div class="col-sm-12 p-0 d-flex ">
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="cool" class="form-control form-control-lg" />
<button type="submit" id="findWord" class="btn btn-primary">Search</button>
<input type="button" id="btnNext" value="next" />
<div id="clear" role="button">X</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-2">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">1<sup>st</sup> collapsible item</div>
<div class="col"><span></span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">1</div>
<div class="col timeline-type__title">First nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">2<sup>nd</sup></div>
<div class="col"><span>collapsible item</span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type">
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">2</div>
<div class="col timeline-type__title">Second nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">3<sup>rd</sup></div>
<div class="col"><span>collapsible item</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">3</div>
<div class="col timeline-type__title">Third nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">4</div>
<div class="col timeline-type__title">Fourth nested collapsible
</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

Style changing with JS not responding

I am trying to change style to a component by "classList.add" but for some reasons it is working for the first two element and for all the rest is taking the new class.
Is there any reason why this is happening and how I can work around to fix this issue?
Basically a button in the page has opacity: 0.3, by selecting and answer the button will become active from disable and the opacity should be 1
Thanks
Here my example:
for (let i = 0; i < option.length; i++) {
[].forEach.call(opts, (el) => {
el.addEventListener("click", btnClick, false);
});
option[i].addEventListener("click", function() {
// console.log(option[i])
// console.log('CLICKED') // click on answer
move.classList.add("active");
nextSecond.classList.add("active");
nextThird.classList.add("active");
nextFour.classList.add("active");
nextFive.classList.add("active");
nextSix.classList.add("active");
nextSeven.classList.add("active");
});
}
function btnClick() {
[].forEach.call(opts, (el) => {
if (el !== this) el.classList.remove("selected");
});
this.classList.add("selected");
$(".next").removeAttr("disabled");
$(".nextSecond").removeAttr("disabled");
$(".nextThird").removeAttr("disabled");
$(".nextFour").removeAttr("disabled");
$(".nextFive").removeAttr("disabled");
$(".nextSix").removeAttr("disabled");
$(".nextSeven").removeAttr("disabled");
}
.btn {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 42px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
color: #4BA21C;
border: 1px solid black;
width: 220px;
border-radius: 23px;
border: 2px solid #4BA21C;
height: 46px;
background-color: white;
&.btn-left {
margin-left: -56px;
}
&:hover {
cursor: pointer;
}
&.back,
&.next,
&.nextSecond,
&.nextThird.ans.active,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
width: 116px;
}
&.back {
color: #5C5C5C;
border: 2px solid #5C5C5C;
background-color: white;
}
&.next,
&.nextSecond,
&.nextThird,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
margin-right: 33px;
opacity: 0.3;
}
&.nextFour,
&.nextFive,
&.nextSix {
margin-right: -14px;
}
}
.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->
<div class="questionsPageThree hide">
<p class="number">3/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
&check; Yes
</button>
<button class="options choosen" type="submit" value="0">
&#120 No
</button>
</div>
<div class="right">
<div class="image-right question3"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
<!-- Question Page 4 -->
<div class="questionsPageFour hide">
<p class="number">4/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
<h4> 0</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="0">
<h4>1 - 2</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="-2">
<h4>3 + </h4>
<h6>TIMES</h6>
</button>
</div>
<div class="right">
<div class="image-right question4"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
javascript html jquery css class

FadeOut one element and fadeIn another element on hover

I'm trying to achieve an effect where on the hover of an element A, an element B is fadeOut and an element C is fadeIn, both inside the element A.
That's what I tried:
$('.button').hover(function() {
info = $(this).find('.info');
download = $(this).find('.download');
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
Hovering one element at a time seems working fine but when you try to hover more elements concurrently the animation it starts to break.
Any solution? Other approaches are accepted. Thanks.

The main problem is to stop the animation before assigning another. This way there are no glitches:
$('.button').each(function(i) {
var thisButton = $(this);
var thisInfo = thisButton.find('.info');
var thisDownload = thisButton.find('.download');
thisButton.on('mouseenter', function(e) {
thisDownload.stop();
thisInfo.stop().fadeOut(150, function() {
thisDownload.stop().fadeIn(150);
});
}).on('mouseleave', function(e) {
thisInfo.stop();
thisDownload.stop().fadeOut(150, function() {
thisInfo.stop().fadeIn(150);
});
});
});
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
Also on JSFiddle
Posting this because this may happen to skyline's answer:

You are inadvertently creating global variables for info and download by omitting the var, let, or const keywords. That means every function call is using and overwriting those variables. You need to create local variables in each function.
$('.button').hover(function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
download.stop();
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
info.stop();
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>

content overlapping in Ipad landscape view

my content is working fine in desktop and other small devices but in iPad landscape view ( screen size 1024pX768) I'm facing issue, when I clicked on the menu sidebar toggle it's overlapping on the existing content. we're using bootstap 3
I don't want overlap the div content its there in the area when menu toggle clicked.
In the first image, it looks fine when clicked on the toggle menu button it will be overlapped.
My HTML code is:
<div class="row">
<div class="box-hseader">
<div class="col-md-6 col-sm-6">
<div class="col-md-3" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="totalComplaints()">
<div class="col-mds-3">
<span>Total: {{commonareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat" ng-click="isSolved()">
<div class="col-mds-3">
<span>Solved: {{commonareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{commonareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{commoncanceled||0}}</span>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="form-group form-inline pull-right rghtFlt">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All">All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
data-whatever="#getbootstrap" data-target="#exportComplaintsId"
ng-click="getComplaintId(1)" data-keyboard="false">Export
</button>
</div>
</div>
</div>
My CSS code is:
#media only screen and (max-width: 320px){
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 568px) {
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 640px) {
.rghtFlt{
float: none !important;
}
}
.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}
Toggle Navigation JS Script:
// toggle nav bar
function openNav() {
var marginLeftContent = document.getElementById("user_name");
if (marginLeftContent.style.display === 'none') {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
document.getElementById("sidebar-left").style.width = "230px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "block";
document.getElementById("main-header").style.marginLeft = "228px";
document.getElementById("main-footer").style.marginLeft = "230px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '230px';
} else {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
document.getElementById("sidebar-left").style.width = "70px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "none";
document.getElementById("main-header").style.marginLeft = "70px";
document.getElementById("main-footer").style.marginLeft = "70px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '69px';
}
}

Finally achieved my self what I'm expecting the result, I created the custom column width code instead of bootstrap width class after that it is working
My CSS code:
.col-md-1-complnts {
width: 12.29%;
}
.col-md-1-complnts-four {
width: 5%;
}
.col-md-4-complnts-search {
width: 41% ;
}
My HTML code:
<div class="row">
<div class="col-md-1-complnts-four col-xs-2 " style="position: initial !important;">
<button type="button" class="btn btn-info " ng-click="backtodashboard()"><i
class="fa fa-reply"></i></button>
</div>
<div class="col-md-2 col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;">
<button type="button" class="btn btn-success" data-toggle="modal" style="width: 100%"
data-target="#complaisntsmodel" data-whatever="#getbootstrap" ng-click="complaints();complaintsresp();setFormPristine()"
data-keyboard="false">
<i class="fa fa-plus-circle"></i>
Rise Complaint
</button>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="totalPlayComplaints()">
<div class="col-mds-3">
<span>Total:Play {{playareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="isPlaySolved()">
<div class="col-mds-3">
<span>Solved: {{playareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{playareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{playAreacanceled||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-10 " style="position: initial !important;" >
<div class="form-group form-inline ">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter" style="width: 100%"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All" >All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-4-complnts-search col-xs-12 " style="position: initial !important; margin-bottom: 10px; ">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1-complnts col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;" >
<button type="button" class="btn btn-success " style="width: 100% !important" data-toggle="modal" data-whatever="#getbootstrap" data-target="#exportComplaintsId" ng-click="getComplaintId(2)" data-keyboard="false">Export
</button>
</div>
</div>
Nothing changed anything in toggle navigation JS

Fade out (and display none) and fade in another element

I´ve made a site with three pictures and three buttons under each of the pictures. When you clicked on a button the picture disappears and a icon take its place. Now it switch element direct but i wanna have som fade out and fade in. Any idea how i can accomplish that? I´ve tried opacity but when the animation appears so disappears not the element but it´s invisible.
Html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>A&A-design</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<header class="col-md-12 col-xs-12 text-center">
<h1 class="linje-botten">A&A-design</h1>
<!--fixa någon logga här-->
<nav class= "navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="bakgrund">Om oss</li>
<li class="bakgrund">Tidigare projekt</li>
<li class="bakgrund">Priser</li>
<li class="bakgrund">Kontakt</li>
<li class="bakgrund">Hitta hit</li>
</ul>
</nav>
</header>
<main>
<i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
<i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="../f%C3%B6retag/bilder/data1.jpg" alt="">
<button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
<i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
<i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="../f%C3%B6retag/bilder/data2.jpg" alt="">
<button id="button" class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
<i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
<i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
<div class="col-md-4 col-sm-6 col-center col-xs-12">
<img src="../f%C3%B6retag/bilder/data3.jpg" alt="">
<button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 col-sm-offset-3 col-md-offset-4" id="klocka"></div>
</main>
</div>
</div>
<script src="https://use.fontawesome.com/ab9989071e.js"></script>
<script src="main.js"></script>
</body>
</html>
CSS
.col-md-4 img {
width: 100%;
height: auto;
}
#media (min-width:768px) and (max-width:992px) {
.col-center {
float: none;
margin: 0 auto;
}
}
.linje-botten {
border-bottom: 3px solid black;
}
li:hover {
background-color: #1a542b;
}
.navbar-nav {
margin: 0px;
font-size: 1.4em;
}
/* #1a542b #eb9822 */
.navbar-inverse .navbar-nav>li>a {
color:white;
}
.col-sm-6 {
margin-bottom: 5px;
}
img {
margin-bottom: 3px;
}
.navbar-inverse {
box-shadow: #515d63 4px 4px 4px;
}
body {
background-color: #eb9822;
}
.big-thumb, .big-info, .big-trash{
font-size:300px!important;
float: left;
}
#media (max-width:768px) {
.big-thumb, .big-info, .big-trash {
font-size: 300px!important;
float: none;
text-align: center;
}
}
#klocka {
border: 5px black solid;
font-size: 1.5em;
color: #ff8500;
background-color: #3e4241;
text-align: center;
border-radius: 4px;
}
JS
var tumme = document.getElementsByClassName("btn-primary");
for (i=0;i<tumme.length;i++) {
tumme[i].onclick=function() {
this.parentElement.style.display='none'
this.parentElement.previousElementSibling.style.display='block';
}
};
thumbs=document.getElementsByClassName("big-thumb");
for(j=0;j<thumbs.length;j++) {
thumbs[j].addEventListener("click", function(){
this.style.display='none';
this.nextElementSibling.style.display='block';
})};
var info = document.getElementsByClassName("btn-info");
for (i=0;i<info.length;i++) {
info[i].onclick = function() {
this.parentElement.style.display='none';
this.parentElement.previousElementSibling.previousElementSibling.style.display='block';
}
};
bigInfo=document.getElementsByClassName("big-info");
for(j=0;j<bigInfo.length;j++) {
bigInfo[j].addEventListener("click", function() {
console.log("hej");
this.style.display='none';
this.nextElementSibling.nextElementSibling.style.display='block';
})
}
var trash = document.getElementsByClassName("btn-danger")
for(i=0;i<trash.length;i++) {
trash[i].onclick = function() {
console.log("333");
this.parentElement.style.display = 'none';
this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.style.display = 'block';
console.log(this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling);
};
}
bigTrash=document.getElementsByClassName("big-trash");
for(j=0;j<bigTrash.length;j++) {
bigTrash[j].addEventListener("click", function() {
this.style.display='none';
this.nextElementSibling.nextElementSibling.nextElementSibling.style.display='block';
})
}
document.onload = visatid();
function visatid() {
//Datum
var date = new Date();
var year = date.getYear();
if (year < 1000) {
year += 1900;
}
var day = date.getDay();
var month = date.getMonth()+1;
var daym = date.getDate();
var dayarray = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
var montharray = new Array("Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December");
//Tiden
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if (h===24) {
h = 0;
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var clock = document.getElementById("klocka");
console.log(month);
console.log(day);
console.log(dayarray[day-1]);
console.log(montharray[month-1]);
clock.innerHTML = "Hej dagens datum är "+dayarray[day-1]+" "+daym+" "+montharray[month-1]+" "+year+" och klockan är i nuläget "+h+":"+m+":"+s;
setTimeout(visatid, 1000);
}

Apply opacity 0 to the elements to hide and opacity 1 to the elements to show.
Apply this css to the elements to make them fade
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

Categories