We Keep Coding

Trigger DIV content on button click + change button text

I am trying to trigger the visibility of a DIV via a button.
My code looks like this:
function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}
}
div {
width: 100px;
height: 100px;
}
.hidden {
display:none
}
.shown {
display:block;
}
<button id="csrmore" onclick="myFunction()">
Show more
</button>
<div id="myDIV" class="hidden">
This is the triggerable content.
</div>
Fiddle: https://jsfiddle.net/6zxa0Lg2/
It works fine, however since I am a JS starter, I was wondering if this is bad practice or is it a totally fine piece of code?
Thanks for every help :)

Here's another way to go about it. Make it all relative. The button is clicked and the javascript finds the content associated to that button to show/hide. This way you don't need any ID tags and you can have as many show/hide buttons as you want on the page.
document.addEventListener('DOMContentLoaded', () => {
// after the page loads...
document.querySelectorAll('.csrmore').forEach(button => {
// find all the 'show more' buttons and for each one...
button.addEventListener('click', e => {
// when someone clicks this button
let content = e.target.closest('.container').querySelector('.content');
// find the content div associated with this button
content.classList.toggle('hidden');
// toggle on or off the content
e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide';
// change the text of the button
})
})
})
div {
width: 100px;
height: 100px;
}
.hidden {
display: none
}
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
<hr>
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>

This is a fine way to do this! This is not the solution I would not have come up with, but it is actually pretty clever. I would have thought to have done it by toggling TARGET.style.visibility to either "hidden" or "visible" when clicking the button. Again though, your code looks perfectly fine!

Changing image when div is active on SlideToggle

I currently have a setup with three seperate buttons that open three divs. I want one div (namely lockedin) to be open at the start. Furthermore, the divs should close when another is opened by the buttons, which I have accomplished now.
There is one more thing I require and cannot seem to get working properly. Is there a way to show which div is currently active? So when the page is loaded, button2 shows an orange filled button (which I have as an image) and the other two buttons show the white filled button. When another div is selected by means of for example button 1, the button 2 should change to the white filled button, and the button 1 should change to the orange filled button. I have the image SRC's, but just don't know how to select the image based on the active state of its given div.
Thank you in advance.
jQuery(document).ready(function( $ ){
//Start of Jquery
$('.button1').click(function(){
if ($('.product').css('display') === 'none') {
$('.product').slideToggle('slow');
}
$('.developers').slideUp();
$('.lockedin').slideUp();
});
$('.button2').click(function(){
if ($('.lockedin').css('display') === 'none') {
$('.lockedin').slideToggle('slow');
}
$('.product').slideUp();
$('.developers').slideUp();
});
$('.button3').click(function(){
if ($('.developers').css('display') === 'none') {
$('.developers').slideToggle('slow');
}
$('.product').slideUp();
$('.lockedin').slideUp();
});
// End of Jquery
});
.product {
display:none;
color: yellow;
}
.lockedin {
color:yellow;
}
.product_active{
display:none;
}
.developers {
display:none;
color: yellow;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product_active.png" class="product_active" alt="product_active" />
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
<div class="product">
Testdiv1
</div>
<div class= "lockedin">
Testdiv2
</div>
<div class = "developers">
Testdiv3
</div>

Popup div when window close

I want to make a POPUP div when user clicks on close window button.
At the moment i have this code:
JS:
<script type="text/javascript">
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': false
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
<div style="display: none;">
<a id="trigger" href="#popup"> </a>
<div id="popup" style="width: 250px; height: 400px;">
<p>This would be an aweber form.</p>
</div>
</div>
It works, but not really the way I need. It popups the standard browser box with two buttons, stay or leave. I want to popup the div with id POPUP.
Please, can some one help me to fix my code?
FIDDLE
Thank you!

Colorbox and Image Resize

I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.

I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});

That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.

accordion if/else logic

I'm guessing my if/else logic is skewed. Basically I have an accordion structure where, on page load, the first accordion pane is half-revealed to a height of 150px. Then when the user clicks on the accordion header it fully opens to a height of 320px. On the next click it should close and act normally like the other accordion elements with a standard hide/show. It currently works ok but its not smooth and the accordion pane closes before it fully reveals.
Here's the html:
<div class="accordion">
<h3 class="acc-header glanceH">At a glance</h3>
<div class="acc-content glanceC slider" >
<div class="hero-video">
</div>
</div>
<h3 class="acc-header">What we do</h3>
<div class="acc-content" >
<div class="hero-video what-we-do">
</div>
</div>
<h3 class="acc-header">How we do it</h3>
<div class="acc-content how" >
</div>
<h3 class="acc-header">Where we reach</h3>
<div class="acc-content where" >
</div>
<h3 class="acc-header">How</h3>
<div class="acc-content" >
</div>
</div>
Here's the jQuery:
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.acc-header').click(function(e) {
e.preventDefault();
$(this).toggleClass('acc-active');
$(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200);
$(this).siblings().removeClass('acc-active');
});
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider').css('height','150px');
$('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');
//if its already been opened, close it, else open it to 320px
$('.glanceH').click(function() {
if(!$(this).hasClass('acc-active')) {
$(this).next().siblings('.acc-content').slideUp(2000);
$(this).siblings().removeClass('acc-active');
}
else if($('.slider').hasClass('itsopen')){
$('.slider').animate({ height: 320}, 'slow');
}
});

Update: Oops, it would help if I read the question - Here is a demo :P
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
var first = $('.slider');
// open peek if clicked, otherwise hide it
if (first.is('.itsopen')) {
if ($(this).next().is('.acc-active')) {
// open peek to full height
first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
return;
} else {
// close first because a different header was clicked
first.removeClass('itsopen acc-active').slideUp('slow');
}
}
// remove active class from all content
$('.acc-content').removeClass('acc-active');
// show active content
$(this).next().addClass('acc-active').toggle('slow');
// close all content that isn't active
$('.acc-content:not(.acc-active').slideUp('slow');
return false;
})
// initialize accordion with all content closed
.next().hide();
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
.css({ height: '0px' })
.show()
.animate({ height: '150px' }, 'slow')
.addClass('itsopen acc-active');