My pleasure.
It’s morning here in Japan, so I now have time to reply to a part of your earlier post I missed last night.
If I could create a single complex dropdown that would collapse nicely across all breakpoints, you’re right about leaving it open NOT being a problem. But right now, (as anyone can see from the Blocs document I uploaded in my opening post), I have a dropdown menu for LG, and then I totally rebuilt it in a separate Bloc for MD and smaller. What that means is this. If you have an iPad that triggers LG in landscape orientation, when you rotate the iPad to portrait orientation, you’ll most likely get MD, which is a totally different dropdown that won’t be already dropped down! So the user would then need to tap to make it drop down in MD, and then they might close it. But if they then rotated their iPad back to LG, there’s that LG dropdown still dropped down! So hopefully this explains why I want to CLOSE rather than hide my dropdown.
Another problem I discovered today is that the supposed “solution” I fond last night is no solution at all. Namely, I did this:
But the problem is that when I preview in Blocs, the result is unexpected. The presence of those two Bootstrap classes allows me to click the navi link in LG to make my dropdown display, but then when I try to close it, it won’t close. This is unexpected seeing I would expect to be able to display or hide the dropdown when in LG, and then when in MD or smaller that LG dropdown should auto-hide. But that’s not the way it works. Odd, but I don’t see a way to fix it. 
And here’s yet another odd thing. The Bootstrap Documentation, says this:
<div class="d-lg-none">hide on screens wider than lg</div>
I added that “d-lg-none” class to the dropdown Bloc I created for MD and smaller screens, and although it does work to hide my Bloc, it hides it “on screens wider than MD.” So either the documentation is wrong, or something is strange about Blocs. I won’t complain though because at least I can hide that particular Bloc from displaying in LG, which is what I want. I just cannot use two Classes, as mentioned above, to hide my LG-mode dropdown Bloc when I switch to MD and smaller. Odd. Very odd.
Hello @JDW, I found this for you, hope it will help you:
The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.
Remember that extra-small/mobile (formerly xs ) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4 .
Show/hide for breakpoint and down :
-
hidden-xs-down (hidden-xs)=d-none d-sm-block -
hidden-sm-down (hidden-sm hidden-xs)=d-none d-md-block -
hidden-md-down (hidden-md hidden-sm hidden-xs)=d-none d-lg-block -
hidden-lg-down=d-none d-xl-block -
hidden-xl-down(n/a 3.x) =d-none(same ashidden)
Show/hide for breakpoint and up :
-
hidden-xs-up=d-none(same ashidden) -
hidden-sm-up=d-sm-none -
hidden-md-up=d-md-none -
hidden-lg-up=d-lg-none -
hidden-xl-up(n/a 3.x) =d-xl-none
Show/hide only for a single breakpoint :
-
hidden-xs(only) =d-none d-sm-block(same ashidden-xs-down) -
hidden-sm(only) =d-block d-sm-none d-md-block -
hidden-md(only) =d-block d-md-none d-lg-block -
hidden-lg(only) =d-block d-lg-none d-xl-block -
hidden-xl(n/a 3.x) =d-block d-xl-none -
visible-xs(only) =d-block d-sm-none -
visible-sm(only) =d-none d-sm-block d-md-none -
visible-md(only) =d-none d-md-block d-lg-none -
visible-lg(only) =d-none d-lg-block d-xl-none -
visible-xl(n/a 3.x) =d-none d-xl-block
Demo of the responsive display classes in Bootstrap 4
Also, note that d-*-block can be replaced with d-*-inline , d-*-flex , d-*-table-cell , d-*-table etc… depending on the display type of the element. Read more on the display classes
1 Like
Right. I know. But why did you list all of them in your post? (I haven’t been using them. I only have been using d-* classes, but without success.)
I put the inteire list, because you can found the old way “hide” but in front of every old way you found the new way “d-“ …
1 Like
Here’s the most recent version of my Blocs 3.2.2 document:
Archive.zip (108.8 KB)
Look at the left sidebar and note the following:
- “Bloc #burger-menu” is my dropdown that displays only in MD and smaller.
- “Bloc #products-dropdown” is my dropdown that displays only in LG.
Now select each of those Blocs and look at the Classes I assigned the right sidebar, then preview. Click LG. Click “製品” to make the dropdown appear. Try to close it. You can’t. That’s a problem. Next, click MD and note the dropdown vanishes! That’s good. But click LG again and note the drop down is still there (bad) and you can’t close it!
Thoughts?
This code I just write it in iPad. So there is no confirmation that work, but try add the following code in the page settings:
<script>
$(document).click(function(){
$("#products-dropdown").hide('slow');
});
$("#products-dropdown").click(function(e){
e.stopPropagation();
});
</script>
So try to click outside the menu and check if it works… if not tomorrow I will found a solution…
It doesn’t work.
Ok, I will try two more, if not works tomorrow I will write a code that works.
<script>
$('body').click(function(event){
$dropdowns.not($dropdowns.has(event.target)).hide();
});
</script>Thank you for the code. But I am sorry to say it too does not work.
If select “Bloc #products-dropdown” and then delete “d-none” & “d-lg-block” classes in the right sidebar, then I can close the dropdown without problem. But using those two classes on the dropdown Bloc prevent me from closing it.
Ok, I will found a way tomorrow… sorry for the non code… that’s why I never right code in iPad, I can’t see were are the mistakes… I sketch code in iPad…
1 Like
Thank you for your kindness, @Pealco. Maybe your code is perfect and those two Classes are creating problems. I think so because those Classes are not doing what they are supposed to do!
Have a wonderful evening!
This peace of sh****** of code is driving me crazyyyyyyyy…
But I beat him…
There you go, and I even add the burger menu to close as soon as the system detect a resize trigger, because the same thing happens in that menu…:
<script>
$(window).resize(function () {
var x = document.getElementById("products-dropdown");{
x.style.display = "none";
}
});
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
});
</script>
Just paste it in the beginning of the header code in page preferences.
And you can clear all the -d and - whatever in classes regarding viewport…
I absolutely love your feistiness and being direct about what’s on your mind. I’m exactly like that. Love it! 
I will test your code first thing on Monday and then report back.
Thank you so much for your continued help, @Pealco!
@Pealco
I deleted “d-lg-block” from my #burger-menu then pasted your code into Page Settings > Header. It works great! Thank you! However, I have 5 ID’s that I want to hide on the first page, not just “products-dropdown”. I read online that getElementById() supports only a single ID, but I also read that I should be able to assign a class to each object and then use getElementsByClassName(). But when I substituted that into your code (see below) it didn’t work.
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");{
x.style.display = "none";
}
});
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
});
</script>
When I test the above code in Safari, I get the following Console error:
TypeError: undefined is not an object (evaluating 'x.style.display = "none"')
UPDATE#1: I hacked together the following code which fixes the problem:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
});
</script>
UPDATE#2: I found a new problem. When scrolling on an iPhone, the menu vanishes, as shown in the video below. Any ideas on how to fix this would be appreciated. Thank you.
Hello @JDW glad you found a solution, and that my code had guide you to the right solution.
Here to help you if you have further needs…
Please see my previous post. I just now updated it with a video showing a new problem.
I’m in iPad but I think there had to be because of the second part of the code, about the burger menu, just delete the following code and try it:
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
});Deleting that code fixes the problem, but of course the menu stays displayed when switching display size.
I found the following discussion:
Based on that, I hacked together the following code, but I must have made a mistake because it doesn’t work:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
jQuery(document).ready(function($) {
// Store the window width
var windowWidth = $(window).width();
// Verify if window width has actually changed
if ($(window).width() != windowWidth) {
// Update the window width for next time
windowWidth = $(window).width();
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
}
// Otherwise do nothing
});
});
</script>
UPDATE: Sometimes the most simple solution is the best solution. I will use the following code in Page Settings > Header:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
</script>
And I will add the “d-lg-none” class to my “#burder-menu”. That combination seems to work fairly well.
Thank you for your help, @Pealco.
No problem, if I can tomorrow I’ll give a look at the code, and what is happening…
1 Like