Level 55
@anonymouse703 visibility do not have display value. I think you need visible
Aug 21, 2022
6
Level 6
How to display visibility when Condition is triggered?
I had this logo in the center If I click the logo the hidden div will appear..
I set visibility hidden as default in my div.
My JS
<script>
function displayServices(){
alert('ada');
// var x = document.getElementById("subcategories");
// var x = document.getElementsByClassName("sets");
var set1 = document.getElementsById("set1");
var set2a = document.getElementsById("set2a");
var set2b = document.getElementsById("set2b");
var set3 = document.getElementsById("set3");
if (set1.style.visibility === "hidden" || set2a.style.visibility === "hidden" || set2b.style.visibility === "hidden" || set3.style.visibility === "hidden") {
set1.style.visibility = "display";
set2a.style.visibility = "display"
set2b.style.visibility = "display"
set3.style.visibility = "display"
} else {
set1.style.visibility = "hidden";
set2a.style.visibility = "hidden"
set2b.style.visibility = "hidden"
set3.style.visibility = "hidden"
}
}
</script>
//I also try this
function displayServices(){
alert('ada');
// var x = document.getElementById("subcategories");
// var x = document.getElementsByClassName("sets");
var set1 = document.getElementsById("set1");
var set2a = document.getElementsById("set2a");
var set2b = document.getElementsById("set2b");
var set3 = document.getElementsById("set3");
if (set1.style.visibility === "hidden" || set2a.style.visibility === "hidden" || set2b.style.visibility === "hidden" || set3.style.visibility === "hidden") {
set1.style.visibility = "visible";
set2a.style.visibility = "visible"
set2b.style.visibility = "visible"
set3.style.visibility = "visible"
} else {
set1.style.visibility = "hidden";
set2a.style.visibility = "hidden"
set2b.style.visibility = "hidden"
set3.style.visibility = "hidden"
}
}
</script>
The whole code
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar brand -->
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<img src="images/logo.png" height="40" alt="WeCar Logo" loading="lazy" />
</a>
<!-- Left links -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Jade</a></li>
<li><a class="dropdown-item" href="#">K2 Series</a></li>
<li><a class="dropdown-item" href="#">Ocean Premium</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#SubCategories" class="nav-link " role="button"
aria-expanded="false">
Products
</a>
</li>
</ul>
</div>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<section>
<div class="row">
<div class="container-fluid">
<div class="col-md-8 offset-md-2 mt-5">
<div class="row">
<div id="set1" class=" sets setServices" style="visibility:hidden">
<div class="cols">
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style=" object-fit:fill; background-image: url(images/jade.png)">
<div class="inner">
<p>Jade Series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Jade Series is the premim car care series for luxury cars</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/carcoat.png)">
<div class="inner">
<p>K2 series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>K2 is the best quality car coat solution</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/repair.png)">
<div class="inner">
<p>Ociean Premium</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Ocean Premium Warranty is your complete worries free solution for your car.</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="setServices">
<div class="cols">
<div id="set2a" style="visibility:hidden" class="sets col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style=" object-fit:fill; background-image: url(images/jade.png)">
<div class="inner">
<p>Jade Series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Jade Series is the premim car care series for luxury cars</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<!-- logo -->
<div class="logo-button col">
<button class="navbar-brand mt-2 mt-lg-0" onclick="displayServices()">
<img class="shadow-lg rounded" src="images/logo.png" height="200" width="200" alt="WeCar Logo"/>
</button>
</div>
<div id="set2b" style="visibility:hidden" class="sets col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/repair.png)">
<div class="inner">
<p>Ociean Premium</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Ocean Premium Warranty is your complete worries free solution for your car.</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="set3" style="visibility:hidden" class="sets setServices">
<div class="cols">
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style=" object-fit:fill; background-image: url(images/jade.png)">
<div class="inner">
<p>Jade Series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Jade Series is the premim car care series for luxury cars</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/carcoat.png)">
<div class="inner">
<p>K2 series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>K2 is the best quality car coat solution</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/repair.png)">
<div class="inner">
<p>Ociean Premium</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Ocean Premium Warranty is your complete worries free solution for your car.</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
function displayServices(){
alert('ada');
// var x = document.getElementById("subcategories");
// var x = document.getElementsByClassName("sets");
var set1 = document.getElementsById("set1");
var set2a = document.getElementsById("set2a");
var set2b = document.getElementsById("set2b");
var set3 = document.getElementsById("set3");
if (set1.style.visibility === "hidden" || set2a.style.visibility === "hidden" || set2b.style.visibility === "hidden" || set3.style.visibility === "hidden") {
set1.style.visibility = "display";
set2a.style.visibility = "display"
set2b.style.visibility = "display"
set3.style.visibility = "display"
} else {
set1.style.visibility = "hidden";
set2a.style.visibility = "hidden"
set2b.style.visibility = "hidden"
set3.style.visibility = "hidden"
}
}
</script>
</body>
Level 6
@SilenceBringer So how I will do it sir?
I have this default in my div
<div id="set3" style="visibility:hidden" class="sets setServices">
<div class="cols">
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style=" object-fit:fill; background-image: url(images/jade.png)">
<div class="inner">
<p>Jade Series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Jade Series is the premim car care series for luxury cars</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/carcoat.png)">
<div class="inner">
<p>K2 series</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>K2 is the best quality car coat solution</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="object-fit:fill; background-image: url(images/repair.png)">
<div class="inner">
<p>Ociean Premium</p>
<!-- <span>Lorem ipsum</span> -->
</div>
</div>
<div class="back">
<div class="inner">
<p>Ocean Premium Warranty is your complete worries free solution for your car.</p>
<div class="text-center">
<button class="button btn btn-primary">Find out more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I want is if I click the button it the invisible div will be visible.
Level 55
@anonymouse703 bootstrap has visible and invisible classes to manipulate visibility
https://getbootstrap.com/docs/5.2/utilities/visibility/
so, you can add class="invisible" to your blocks and toogle the class when you need
Please be note that
invisible elements still take up space in the page
if you do not need it - toogle display instead (using d-none class)
Level 6
@SilenceBringer The space is okay since I have hidden items on it.. what I need now is if I click the button the hidden items will be display.
Level 6
I solve it
<script>
function displayServices(){
alert('ada');
// var x = document.getElementById("subcategories");
// var x = document.getElementsByClassName("sets");
$("#set1").removeClass("invisible").addClass('visible');
$("#set2a").removeClass("invisible").addClass('visible');
$("#set2b").removeClass("invisible").addClass('visible');
$("#set3").removeClass("invisible").addClass('visible');
}
</script>
Level 55
@anonymouse703 I think you can remove this part .addClass('visible'), but - yes, that's what I mean
Please or to participate in this conversation.