How to collapse multiple objects and toggle another one - javascript

I'm currently at the beggining of the learning of JS and I was wondering how could I make one or more sections collapse when a button is clicked but still open the wanted section with toggleSection()
here is the whole script:
<body>
<section id="features" class="none">
<div class="content">
<div class="single-item">
<div><h3 class="kat_slick"><button type="button"onclick="toggleSection('kat')"> <img src="0full.jpg" alt=""> Katarina</button></h3></div>
<div><h3 class="mercenarykat_slick"><button type="button"onclick="toggleSection('mercenary')"> <img src="1full.jpg" alt="">Katarina Mercenaire</button></h3></div>
<div><h3 class="redcardkat_slick"><button type="button"onclick="toggleSection('redcard')"> <img src="2full.jpg" alt="">Katarina Carton Rouge</button></h3></div>
<div><h3 class="bilgewaterkat_slick"><button type="button"onclick="toggleSection('bilgewater') "> <img src="3full.jpg" alt="">Katarina de Bilgewater</button></h3></div>
<div><h3 class="kittykat_slick"><button type="button"class="blyat" onclick="toggleSection('kittykat')"> <img src="4full.jpg" alt="">Katarina Mistigri</button></h3></div>
<div><h3 class="highcommandkat_slick"><button type="button"onclick="toggleSection('highcommand')"> <img src="5full.jpg" alt="">Katarina du Haut Commandement</button></h3></div>
<div><h3 class="sandstormkatkat_slick"><button type="button"onclick="toggleSection('sandstorm')"> <img src="6full.jpg" alt="">Katarinadu Désert</button></h3></div>
<div><h3 class="slaybellekat_slick"><button type="button"onclick="toggleSection('slaybelle')"> <img src="7full.jpg" alt="">Katarinadu Sucre d'Orge</button></h3></div>
<div><h3 class="warringkingdomkat_slick"><button type="button"onclick="toggleSection('warringkingdom')"> <img src="8full.jpg" alt="">Katarinadu du Royaume en Guerre</button></h3></div>
<div><h3 class="projectkat_slick"><button type="button"onclick="toggleSection('project')"> <img src="9full.jpg" alt="">Project : Katarina</button></h3></div>
<div><h3 class="deathswormkat_slick"><button type="button"onclick="toggleSection('deathsworm')"> <img src="10full.jpg" alt="">Katarina Tanatophore</button></h3></div>
<div><h3 class="battleacademiakat_slick"><button type="button"onclick="toggleSection('battleacademia')"> <img src="11full.jpg" alt="">Katarina de l'Académie de Combat</button></h3></div>
<div><h3 class="bloodmoonkat_slick"><button type="button"onclick="toggleSection('bloodmoon')"> <img src="12full.jpg" alt="">Katarina Lune de Sang</button></h3></div>
<div><h3 class="battlequeenkat_slick"><button type="button"onclick="toggleSection('battlequeen')"> <img src="13full.jpg" alt="">Katarina Reine du Combat</button></h3></div>
<div><h3 class="highnoonkat_slick"><button type="button"onclick="toggleSection('highnoon')"> <img src="14full.jpg" alt="">Katarina de l'Ouest</button></h3></div>
</div>
</div>
</div>
</section>
</section>
<section id="kat" style="display:none;"> <img src="0full.jpg" alt=""> </section>
<section id="mercenary" style="display:none;"> <img src="1full.jpg" alt=""> </section>
<section id="redcard" style="display:none;"> <img src="2full.jpg" alt=""> </section>
<section id="bilgewater" style="display:none;"> <img src="3full.jpg" alt=""> </section>
<section id="kittykat" style="display:none;"> <img src="4full.jpg" alt=""> </section>
<section id="highcommand" style="display:none;"> <img src="5full.jpg" alt=""> </section>
<section id="sandstorm" style="display:none;"> <img src="6full.jpg" alt=""> </section>
<section id="slaybelle" style="display:none;"> <img src="7full.jpg" alt=""> </section>
<section id="warringkingdom" style="display:none;"> <img src="8full.jpg" alt=""> </section>
<section id="project" style="display:none;"> <img src="9full.jpg" alt=""> </section>
<section id="deathsworm" style="display:none;"> <img src="10full.jpg" alt=""> </section>
<section id="battleacademia" style="display:none;"> <img src="11full.jpg" alt=""> </section>
<section id="bloodmoon" style="display:none;"> <img src="12full.jpg" alt=""> </section>
<section id="battlequeen" style="display:none;"> <img src="13full.jpg" alt=""> </section>
<section id="highnoon" style="display:none;"> <img src="14full.jpg" alt=""> </section>
and here are the function I use or tried to use:
<script>function toggleSection(id) {
let section = document.getElementById(id);
let display = section.style.display;
if (display === "none") {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
jQuery('button').click( function(e) {
jQuery('.collapse').collapse('hide');
});
</script>
My idea would be to link the first button for example to the first section,(which is easily doable with one function) but also to close all the other section if they are opened.
I tried to write a function where I was checking if their 'display' was 'none' and if they weren't, it would change it to none but it seemed that it was also closing the one I want to open at the first place.
I also tried to use Boootstrap but I just can't understand it by myself so it ended up not doing anything.

I usually implement something like this by first hiding / collapsing all sections and after that show / expand the one with id. This way you don't have to trigger all the others individually.
So just put the collapse('hide') part at the top of your function.
function toggleSection(id) {
let section = document.getElementById(id);
let display = section.style.display;
// Give collapsible sections the `collapse` class.
jQuery('section.collapse').collapse('hide');
if (display === "none") {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
Just give collapsible sections the collapse class (they don't have it in your HTML example).
You don't have to programmatically click all buttons this way.

Related

How to remove div if img src is empty with javascript

Hi I am trying to figure out how to remove a div if the img src is empty.
I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla javascript?
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt=""
class="imgCard"
color=""
/>
</div>
<div class="swiper-slide">
<img
src=""
alt=""
class="imgCard"
color=""
/>
</div>
</div>
Here how you can do this
const swipers = document.querySelectorAll('.swiper-slide');
swipers.forEach(e => {
const imgSource = e.querySelector('img').getAttribute('src');
if (imgSource.trim() === '') {
e.remove()
}
})
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="" class="imgCard" color="" />
</div>
</div>
You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this
let imgs = document.querySelectorAll(".swiper-slide img");
imgs.forEach(item => {
if (item.getAttribute('src') === "") {
item.parentNode.remove();
}
});
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="Second image alternate text" class="imgCard" color="" />
</div>
</div>

How I can replace part of the src of 8 images on click?

I have a slider with 8 images with a common folder in its source (img/banana/#.png, img/strawberry/#.png or img/apple/#.png) that I need to change each time I click on another image out of the slider; it also has a folder with a fruit as a name (banana, strawberry or apple). To add one more level of difficulty, I need the image that works as a changing images on slider, also change part of its src for the one it changes.
So, if the changing image that I clicked has the src img/strawberry/1.png and changes the src of the 8 images that has img/banana/#.png as src, it has to be replaced by img/banana/1.png and the 8 images with img/banana/#.png have to change to img/strawberry/#.png. The problem is that I will always have two changing images, and I need to detect the source that the 8 images of the slider have, so they can be replaced by the one of the changing image that is clicked.
This is the code if the slider has 8 images of bananas.
<div class="row">
<div class="col">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banana/1.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/2.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/3.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/4.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/5.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/6.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/7.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/8.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/frutilla/1.png" alt="">
</div>
<div class="col-4">
<img src="img/apple/1.png" alt="">
</div>
</div>
And this is the result that I seek to obtain if I click on one of the two changing images.
<div class="row">
<div class="col">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/strawberry/1.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/2.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/3.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/4.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/5.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/6.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/7.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/8.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/banana/1.png" alt="">
</div>
<div class="col-4">
<img src="img/apple/1.png" alt="">
</div>
</div>
As you can see, the number on the images are always kept, just change the name of the folder (strawberry, banana or apple). I leave an example in image for reference, so it can be understood better.
Btw, the slider I am using is SwiperJS.
Tried to re-create your project so here is an example that might can help you! Click on the small images under the swiper to change the swiper image URL according to the image you clicked on before.
Fiddle demo
HTML
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<!-- https://i.imgur.com/8nKVc0s.jpg ## strawberry-->
<!-- https://i.imgur.com/GBDX2ps.jpg ## banana-->
<body>
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class='selector'>
<img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'>
<img data-type="banana" src='https://i.imgur.com/GBDX2ps.jpg'>
</div>
</body>
JQUERY
$().ready(() => {
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
$(document).ready(function() {
$('.selector img').click(function() {
var iType = $(this).data("type")
//I don't have strawberry and banana in URL so in your case you can use the following to get the type
/*
var iType = getTypeFromURL($(this).attr("src"))
*/
//Now you go through the images to check their type (or in your case, the URL)
var curr_selection = $(".swiper-container .swiper-wrapper .swiper-slide img").data("type")
if (curr_selection != iType)
{
//if the clicked type AND the current images are not fit (by type) then let's change to swiper img urls
var selectedURL = $(this).attr("src");
$(".swiper-container .swiper-wrapper .swiper-slide img").each(function(){
$(this).attr("src", selectedURL).data("type", iType) //you don't need the .data()
})
}
});
});
})
//In order not to write the logic again and again here is a function that will tell you the type from the URL you give as parameter
function getTypeFromURL(url)
{
if (url.contains("strawberry")) return "strawberry";
else if (url.contains("banana")) return "banana";
}

Owl Carousel Not Showing Correctly

I've my bootstrap website and it's work good ...
All JAVASCRIPT codes working except the owl carousel
here is the owl carousel code:
<section id="gallery" class="wow fadeInUp">
<div class="owl-carousel gallery-carousel">
<img src="img/gallery/1.png" alt="">
<img src="img/gallery/2.png" alt="">
<img src="img/gallery/3.png" alt="">
<img src="img/gallery/4.png" alt="">
<img src="img/gallery/5.png" alt="">
<img src="img/gallery/6.png" alt="">
<img src="img/gallery/7.png" alt="">
<img src="img/gallery/8.png" alt="">
</div>
</section>
The carousel showing only two images
Website Files Here
This is simple just add style for the container like this.
<section id="gallery" class="wow fadeInUp animated" style="direction: ltr;">

Replacing div with div while having few buttons on the same page

I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)

Lightbox Gallery Issue

I am hoping someone can help me with this issue ...
I am wanting each of the 6 images to be it's own Gallery, and for the Life of me am Beyond Lost!
Here is the JS code:
$(function(){
// lightbox image
$(".lightbox-image").append("<span></span>");
$(".lightbox-image").hover(function(){
$(this).find("img").stop().animate({opacity:0.5}, "normal")
}, function(){
$(this).find("img").stop().animate({opacity:1}, "normal")
});
});
Here is the HTML:
<div class="pad_left1">
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img1.png" alt="">
<p><strong class="font1">Company Logos</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img2.png" alt="">
<p><strong class="font1">Business Cards</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img3.png" alt="">
<p><strong class="font1">Photography/Photo Edits</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img4.png" alt="">
<p><strong class="font1">Band Logos/Album Covers</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img5.png" alt="">
<p><strong class="font1">Random Designs</strong>???enter text here???<br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img6.png" alt="">
<p><strong class="font1">Websites</strong>???enter text here???<br>
</p>
</div>
</div>
</div>
It's simple try to do it this way if you need a set of gallery
<div>
image #1
image #2
image #3
</div>
<div>
image #4
image #5
image #6
</div>

Categories

Resources