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!

How to show a div element on mouse hover?

I need to show a div when a list element is hovered over, sort of like a drop-down menu.
I already have a way to do this with jQuery which is what I want, but the problem is that when I move mouse away from the list (li element), the div disappears. I want to be able to move the mouse from the list element to the div and be able to interact with the elements within the div.
This would be solved with a click function but I don't want to use click because the elements on the div will contain anchor links that when click will take users down the page, therefore you can see how a click function that shows and keep the div is not a good idea, unless I can find a way to close the div when its contents (anchor links) are clicked.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.nav-item-dropdown {
position: absolute;
/* other styles ... */
}
</style>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown">
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<script>
$(document).ready(function() {
jQuery('#nav-item1').hover(function() {
$('.nav-item1-dropdown').toggle();
});
jQuery('#nav-item2').hover(function() {
$('.nav-item2-dropdown').toggle();
});
});
</script>
I want to be able to move the mouse from the list element (.nav-item-wrap) to the div (.nav-item-dropdown) and be able to interact with the elements within the div. I don't want the div to disappear when I move the mouse away from the list element that triggered it.

.toggle() method simply toggles the visibility of elements. In your code they do well what they are for. In your case, instead of toggle use .show() and .hide() like below. You need additional class to hide div when load.
$(document).ready(function() {
jQuery('#nav-item1').hover(function() {
$('.nav-item1-dropdown').show();
$('.nav-item2-dropdown').hide();
});
jQuery('#nav-item2').hover(function() {
$('.nav-item2-dropdown').show();
$('.nav-item1-dropdown').hide();
});
});
.nav-item-dropdown {
position: absolute;
/* other styles ... */
}
.yourClass {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown yourClass">
div1
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<div class="nav-item-dropdown nav-item2-dropdown yourClass">
div2
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>

Try this:
$(document).ready(function(){
jQuery('#nav-item1').mouseover(function() {
$('.nav-item1-dropdown').show();
});
jQuery('#nav-item2').mouseover(function() {
$('.nav-item2-dropdown').show();
});
});

I think you can use something like this for showing and hiding the div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown" style="display:none">
<p>your action goes here</p>
</div>
<script>
$(document).ready(function() {
jQuery('.nav-wrap').hover(function() {
$('.nav-item1-dropdown').show();
});
$('.nav-item1-dropdown').hide(); //use it wherever you need to hide it
});
</script>

Unfold Submenu conditions (jQuery)

I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.

Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

How to catch any click event in jquery [duplicate]

This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.

You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});

At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.

updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});

<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")

<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/

Move element with jQuery

I have a sidebar with expandable links. When they expand past a certain point I want to move some text from one div to another (red to blue). When I expand and collapse the links, at some point, the text I was planning to move just disappears.
There are two problems:
The text should move to the blue div when I expand, back to red when I collapse
The text disappears altogether, not moving to the other div.
Here is my html:
<div id="sidebar">
<div>
Test 1
<p class="cal-desc">Lorem ipsum</p>
</div>
<div>
Test 2
<p class="cal-desc">Lorem ipsum</p>
</div>
<div>
Test 3
<p class="cal-desc">Lorem ipsum</p>
</div>
</div>
<div class="red">
<p>Just some random text</p>
</div>
<div class="blue">
</div>
Here is the jQuery/js code:
$(document).ready(function() {
var isExtended = false;
function placeTiles() {
// When to move content from .red to .blue
if ($('#sidebar').height() > 150 && isExtended == false) {
$('.red').appendTo($('.blue'));
isExtended = true;
// When to move content from .red to .blue
} else if ($('#sidebar').height() <= 150 && isExtended == true) {
$('.blue').appendTo($('.red'));
isExtended = false;
}
}
$('.cal-desc').hide();
// Check how thing are on init
placeTiles();
$('.cal-title').click(function() {
$(this).siblings('.cal-desc').toggle();
placeTiles();
});
});
Here is a link to my jsfiddle.
I'm really a newbie at javascript so any suggestion for my code is most welcome!

See this updated fiddle: http://jsfiddle.net/awden/3/
The problem is that you are appending the entire .red element to the inside of the .blue element
$('.red').appendTo($('.blue'))
Instead, you want to append the contents of .red to .blue, and vice versa. In other words, you want something like:
$('.red > p').appendTo($('.blue'))

I think want you mean to do is move the <p> from .red to .blue and back again. To do that, just add > p to each selector, like this:
$('.red > p').appendTo($('.blue'));
and
$('.blue > p').appendTo($('.red'));