Toggle image(flag's) in language panel


Toggle image(flag's) in language panel



I have a language panel in which I have one image (main-image) that show's when the page is loaded. I also have three additional image's which are hidden when the page loads.


image


main-image


image's



The question is how to toggle main image when one of the additional image's is clicked. I need to toggle main-image with the image which is clicked.


image's


image



Here is Codepen



My first try


let menuBtn = document.getElementById("menu-btn");
menuBtn.addEventListener("click", ()=>{
let mainBtnImg = document.getElementById("main-btn-img");
let otherThreeImg = document.querySelectorAll(".menu-img");
for(let i = 0;i< otherThreeImg.length; i++){
mainBtnImg.src = otherThreeImg[this].src;
}
})



Second try



changed this part only


mainBtnImg.src = this.otherThreeImg;



Downvoters please comment first




$(document).on('click', function (e) {
if ($(e.target).closest(".menu-btn").length === 0) {
$('.menu-nav').removeClass('menu-nav--open');
}
});

$('.menu-btn').on('click', function(e){
e.preventDefault();
$(this).toggleClass('menu-btn--open');
$('.menu-nav').toggleClass('menu-nav--open');
});


body, html {
margin: 0;
}

.section {
width: 100%;
height: 100vh;
background: linear-gradient(#55efc4, #ffeaa7);
position: relative;
}

.menu-btn__wrapper {
position: absolute;
top: 20px;
right: 20px;
}

.menu-btn {
width: 50px;
height: 50px;
display: block;
background-color: #fff;
border-radius: 50%;
position: relative;
}

.menu-block {
display: flex;
flex-direction: column-reverse;
}

.menu-nav {
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
transform-origin: top center;
transform: scaleY(0) translateY(-20px);
opacity: 0;
}
.menu-nav.with-border {
background-color: #fff;
padding-bottom: 20px;
padding-top: 30px;
margin-top: -40px;
border-radius: 50px;
}
.menu-nav--open {
transform: scaleY(1) translateY(0);
opacity: 1;
}
.menu-nav__name {
position: absolute;
right: 45px;
top: 0;
margin: 0;
opacity: 0;
transition: .3s;
}
.menu-nav__name img {
idth: 30px;
height: 30px;
border-radius: 50%;
}
.menu-nav__link {
display: inline-block;
color: #000;
margin-top: 5px;
transition: .4s;
position: relative;
}

.menu-nav__img {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 20%;
}


https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js










</div>
</div>




1 Answer
1



You need to add onclick event on each menu item and replace the src of the main image with the clicked one.




$(document).on('click', function (e) {
if ($(e.target).closest(".menu-btn").length === 0) {
$('.menu-nav').removeClass('menu-nav--open');
}
});

$('.menu-btn').on('click', function(e){
e.preventDefault();
$(this).toggleClass('menu-btn--open');
$('.menu-nav').toggleClass('menu-nav--open');
});

$('.menu-nav__link').on('click', function(e){
$("#main-btn-img").attr('src', $(this).find('img').attr('src'));
});


body, html {
margin: 0;
}

.section {
width: 100%;
height: 100vh;
background: linear-gradient(#55efc4, #ffeaa7);
position: relative;
}

.menu-btn__wrapper {
position: absolute;
top: 20px;
right: 20px;
}

.menu-btn {
width: 50px;
height: 50px;
display: block;
background-color: #fff;
border-radius: 50%;
position: relative;
}

.menu-block {
display: flex;
flex-direction: column-reverse;
}

.menu-nav {
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
transform-origin: top center;
transform: scaleY(0) translateY(-20px);
opacity: 0;
}
.menu-nav.with-border {
background-color: #fff;
padding-bottom: 20px;
padding-top: 30px;
margin-top: -40px;
border-radius: 50px;
}
.menu-nav--open {
transform: scaleY(1) translateY(0);
opacity: 1;
}
.menu-nav__name {
position: absolute;
right: 45px;
top: 0;
margin: 0;
opacity: 0;
transition: .3s;
}
.menu-nav__name img {
idth: 30px;
height: 30px;
border-radius: 50%;
}
.menu-nav__link {
display: inline-block;
color: #000;
margin-top: 5px;
transition: .4s;
position: relative;
}

.menu-nav__img {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 20%;
}


https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js










</div>
</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

api-platform.com Unable to generate an IRI for the item of type I'm trying to setup my first api-platform instance and have run into some presumably noob questions around IDE. What i'm trying to do is setting up an register and reset entity in order to deal with registrations and password reminders from an app. And then have the entity's passed to a custom controller to do some checks, balances and mails afterwards (haven’t gotten around to that yet). But I keep running into this error when posting to my custom entities: { "@context": "/api/contexts/Error", "@type": "hydra:Error", "hydra:title": "An error occurred", "hydra:description": "Unable to generate an IRI for the item of type "AppXXXUserBundleEntityRegister"", "trace": [ { "namespace": "", "short_class": "", "c
Read more

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma
Read more

Do graphics cards have individual ID by which single devices can be distinguished?

Do graphics cards have individual ID by which single devices can be distinguished? I have several graphics cards of the same manufacturer and same model and I want to distinguish them not only by the pcie socket they reside in but by some individual value I can read from the hardware. Is there such value and if so what would it be called and how could I access it? Right now I'm using modern nvidia cards (10xx series) and nvidia inspector.but I'd prefer if there was any value that was also applicable to amd. I have programming and scripting knowledge. I am running Windows 10 1 Answer 1 This is a powershell example to pull information from video cards. The DeviceID is supposed to be unique but only if the manufacturer supports Windows Display Driver Model (WDDM). (I copied this directly from docs.microsoft.com) $strComputer = "." $colItems = get-wmiobject -class "Win32_VideoC
Read more