Develop Reference

How to display specific div onclick using js

I have multiple with various div inside. On click of more or less a tag I want to display specific i.e. display_on_click
And I want to add that class only for 2 minutes after that remove that class and hide div
My HTML code as below:
$('body').on("click", ".more, .less", function() {
var obj = $(this);
obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});
.display_on_click {
display: none
}
.display_on_click.display_on_click_show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ol class="item_wrapper">
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
</ol>
</div>
Anyone have idea what I am doing wrong then let me know.
And I want to add that class only for 2 minutes after that remove that class and hide

I would do it like this:
$('body').on("click", ".more, .less", function() {
let parentLi = $(this).parent().parent();
let elementToManipulate = obj.find('.display_on_click');
elementToManipulate.addClass('display_on_click_show');
setTimeout(()=> {
elementToManipulate.removeClass('display_on_click_show')
}, 120000);
});
Instead of using closests I'm grabbing the parent of the parent which is the <li>. You can use closest to grab it. Once I am in the parent li, I find the child with the .display... class (the elementToManipulate object).
Then I add the classes and create a setTimeout to remove the class after 120.000 miliseconds (60sec * 2 * 1000msec)

<button onClick='OpenDiv'>Open</button>
function OpenDiv(){
let div = document.getElementById('BoxOne')
if (div.style.display == 'flex') {
div.style.display = 'none';
else
div.style.display = 'flex';
}
I hope this will work 👍

Remove appended element

When I type something in the first box, and click Next, the word I typed is inserted on my page. However, if I click Back and then click Next again, it is printed a second time.
I want the keyword appended after I've clicked Next to be deleted if I click Back so that if I click Next again it is printed only once (and updated if I have made any edit).
document.addEventListener("DOMContentLoaded", function() {
var stepOne = document.getElementsByClassName("step-1");
var stepTwo = document.getElementsByClassName("step-2");
var nextButton = document.getElementsByClassName("next");
var backButton = document.getElementsByClassName("back");
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
newKeyword.innerText = inputKeyword;
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
backButton[0].onclick = function() {
stepOne[0].style.display = "block";
stepTwo[0].style.display = "none";
}
})
.step-1 {
display: block;
}
.step-2 {
display: none;
}
<!--STEP 1-->
<div class="main step-1">
<div class="tab" id="tab-1">
<div class="inputFields">
<p id="jobtitle" class="inputFieldName">Job title</p>
<input type="search" id="inputJobTitle" class="inputBar" />
<p class="and">AND</p>
</div>
<div class="button">
<button class="next">Next ></button>
</div>
</div>
</div>
<!--STEP 2-->
<div class="main step-2">
<div class="tab" id="tab-1">
<div class="inputFields">
<div id="retrievedFields"></div>
<input type="search" class="inputBarAlternative" />
<div class="add">
<button class="addButton">+ Add Keyword</button>
<p id="addKeyword">
Add a skill or keyword that must be in your search results
</p>
</div>
</div>
<div class="buttons">
<button class="back">Back</button>
<button class="next">Next</button>
</div>
</div>
</div>
</body>

Each new click on the next button will trigger an append. So you just have to do the opposite of an append on the click on back. Just add this line in your onclick:
document.getElementById("retrievedFields").removeChild(document.getElementById("retrievedFields").lastElementChild);

You could also check to see if the element exists before you create it..
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.getElementById("retrievedField-1")
if (!newKeyword) {
newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
newKeyword.innerText = inputKeyword;
}

JS and HTML hide div not working

I have built a tab bar website that only uses one page I am using js to hide 3 elements and show one. When I click the links to show one and hide the others everything is messing up and 3 are shown or 2 it's random. Here is my code.
function unhide(divID, otherDivId, otherDivId, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
.hidden {
display: none;
}
.unhidden {
display: block;
}
<div id="tweaked" class="hidden">
<p>Test1</p>
<footer class="bottom">
<a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a>
<a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a>
</footer>
</div>

Perhaps you want something like this:
var anchors = document.querySelectorAll(".bottom .tab"),
showHide = function(e) {
var parent = this.parentNode;
anchors.forEach(a => {
var relatedDiv = document.getElementById(a.dataset.tab),
aClass = a.className.trim();
if (a.dataset.tab != this.dataset.tab) {
relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden";
a.className = aClass.replace("current", "");
} else {
relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden";
a.className = aClass.replace("current", "") + " current";
}
});
};
anchors.forEach(a => a.addEventListener("click", showHide));
.hidden{
display:none;
}
.unhidden{
display:block;
}
<div id="home" class="unhidden">
<p>Home</p>
</div>
<div id="tweaked" class="hidden">
<p>Tweaks</p>
</div>
<div id="other" class="hidden">
<p>Other</p>
</div>
<div id="more" class="hidden">
<p>More</p>
</div>
<footer class="bottom">
<a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a>
<a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a>
</footer>

Have you tried item.classList ?
Element.classList | MDN
You could try something like this:
if(item.classList.contains("hidden")){
item.classList.remove("hidden");
item.classList.add("unhidden");
}else{
item.classList.add("hidden");
item.classList.remove("unhidden");
}

Background Content Prints when Printing Modal Contents in IE

I am trying to print the contents of a Bootstrap Modal. This works well in Chrome, but in IE, when the modal prints the entire page contents overlap. I have tried a few solutions found Here, but I can't get any of them to work for me.
Here is my HTML for my modal:
<div ng-cloak>
<div id="stack4" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-dialog modal-responsive">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span ng-bind="title"></span></h4>
</div>
<div class="modal-body">
#Html.Partial("_PrintSSQ")
</div>
<div class="modal-footer">
<span class="pull-left"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></span><span class="pull-right"><button type="button" class="btn btn-primary" ng-click="savePdf()">Prepare Print View</button></span>
</div>
</div>
</div>
</div>
</div>
Depending on the user's selection via checkbox it inserts which partial view to print using the following:
<div id="saveToPdf">
<div ng-repeat="ps in print.sections" >
<div ng-if="ps.QuestionSectionID == 1">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintCompanyProfile")
<br />
</div>
<div ng-if="ps.QuestionSectionID == 2">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintCompanyServices")
<br />
</div>
<div ng-if="ps.QuestionSectionID == 3">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintInformationRelease")
<br />
</div>
</div>
</div>
Here is my CSS:
#media print {
body {
visibility:hidden;
}
#printSection, #printSection {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
Here is my Angular Controller js:
$scope.savePdf = function () {
printElement(document.getElementById('saveToPdf'));
window.print();
};
function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof (delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof (delimiter) === "object") {
$printSection.appendChlid(delimiter);
}
}
$printSection.appendChild(domClone);
}
The modal displays like this:
but it prints like this:
This is critical as most of our users use IE. Any assistance is greatly appreciated!!!!

I was able to get this to work by adding:
<style type="text/css" media="print">
.lb1 {
display: none;
}
</style>
Then putting everything that I didn't want to show in a div using the lb1 class.

Why is this JS not firing

I have this Markup, and the way this is supposed to work is the user click on the "icon arrow" and this following JS is supposed to fire which will display the hidden content, in other words opening the window. this works in another program, but is there any reason this is not firing.
Here is the markup:
<div data-bind="foreach {data:movies}">
<div class="content-item full bottom-border">
<div class="content-item-container">
<div class="movie-listing-header">
<a class="icon arrow"></a>
<div class="movie-details">
<div class="title"></div>
<div class="info">
<div>
<span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span>
</div>
</div>
</div>
<a class="icon right-arrow"></a>
</div>
<div class="showtimes">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
</div>
</div>
</div>
and here is the .js
$(document).ready(function () {
$('.icon.arrow').click(function () {
var active_el = $(this);
$('.movie-listing-header').each(function () {
if ($(this).get(0) === active_el.parent().get(0)) {
if ($(this).hasClass('active')) {
$(this).siblings('.showtimes').hide();
} else {
$(this).siblings('.showtimes').show();
}
$(this).toggleClass('active');
} else {
$(this).removeClass('active');
$(this).siblings('.showtimes').hide();
}
});
});
});