jquery fade toggle div over another div when click?

jquery fade toggle div over another div when click? - javascript

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?
My code:
<script>
$(document).ready(function(){
$(".thumbnail").hide();
$(".work").click(function(){
$(".thumbnail").fadeToggle('slow');
});
});
$(document).ready(function(){
$(".person").hide();
$(".about").click(function(){
$(".person").fadeToggle('slow');
});
});
</script>

Try this.
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").hide();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
});
Updated based on Matthew's comment
Demo here

This is a common problem:
multiple items to display but one of them showing at a time
simple solution is:
hide all elements
show what you want to see
in this way, you cover all possible solutions, even display nothing, where you skip second phase
in your case:
function hideAll(){
$(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}
$(document).ready(function(){
$(".work").click(function(){
hideAll();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
hideAll();
$(".person").fadeToggle('slow');
});
hideAll();
});

This is something very easy to complete, its best to use the same click event names with the divs you want to open so it can be modular.
There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.
$(document).ready(function() {
$('section').hide();
$(".btn").click(function() {
$('section').fadeOut('1000');
$('section#'+$(this).attr('id')).delay('1000').fadeIn();
});
});
/* CSS Document
html {
background: url(green.jpg) no-repeat center center fixed;
background-size: cover;
}
*/
body {
font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */
.btn {
cursor: pointer;
margin: 10px;
text-decoration: none;
padding: 10px;
font-size: 14px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
}
.btn:hover {
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
color: #000;
}
.contact:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.about {
color: #000;
}
.about:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.work {
color: #000;
}
.work:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
}
.buttons {
padding-top: 30px;
text-align: center;
position: absolute;
top: 50px;
left: 100px;
}
.title,
.subtitle {
font-family: 'Wire one';
font-weight: normal;
font-size: 5em;
margin-bottom: 15px;
text-align: center;
}
.subtitle {
line-height: .9em;
font-size: 5.5em;
margin-top: 0;
margin-bottom: 40px;
}
.tagline {
font-size: 1.4em;
line-height: 1.3em;
font-weight: normal;
text-align: center;
}
.thumbnail {
background-color: rgba(255, 255, 255, .2);
border: 0 none;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.thumbnail .caption {
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="btn" id="about">About</a>
<a class="btn" id="work">My Work</a>
<a class="btn" id="contact">Contact</a>
</div>
<!-- Main (Home) section -->
<section class="section" id="about">
<div class="container">
<div class="person" style="display: block;">
<div class="row">
<div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">
<!-- Site Title, your name, HELLO msg, etc. -->
<h1 class="title">Welcome!</h1>
<h2 class="subtitle">My name is Daniel Adamek</h2>
<!-- Short introductory (optional) -->
<h3 class="tagline">
I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
Currently, I am looking for any kind of job in IT field.<br>
Please, check out my work and feel free to contact me :)
</h3>
<!-- Nice place to describe your site in a sentence or two -->
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
</section>
<!-- Third (Works) section -->
<section class="section" id="work">
<div class="container">
<div class="thumbnail" style="display: block;">
<h2 class="text-center title">More Themes</h2>
<p class="lead text-center">
Huge thank you to all people who publish
<br>their photos at Unsplash, thank you guys!
</p>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
</div>
</div>
</section>
If you do want to keep your HTML the exact same, try this out
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").fadeOut('500');
$(".thumbnail").delay('500').fadeIn('slow');
});
$(".about").click(function(){
$(".thumbnail").fadeOut('500');
$(".person").delay('500').fadeIn('slow');
});
});

function hideAll()
{
$(".hideable").hide();
}
$(document).ready(function(){
hideAll(); // great idea. First hide all then show the correct one.
$(".button").click(function(){
hideAll();
if ($(this).hasClass("work"))
{
$(".thumbnail").fadeToggle('slow');
}
else if ($(this).hasClass("about"))
{
$(".person").fadeToggle('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>
<button class="work button">Work</button>
<button class="about button">About</button>
This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.

Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.
What I would suggest trying is wrapping both text inside one div and working with position properties.
ie
HTML
<div class="wrapper">
<div class="thubmnail">Some Thumbnail</div>
<div class="person">Some Person</div>
</div>
CSS
.wrapper {
position: relative;
}
.wrapper div {
position: absolute; //This will position both divs one on top of the other
}

Related

Trying to make the bootstrap navbar sticky with jQuery

I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder
i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span>WolfeTech Devs Inc.</span> | Powered by
<span>Lono Concepts</span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
//CSS FILE --------------->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}
//MAIN.JS FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});

Maybe you can try with position: sticky;

My Transition property did not working when I click one button from another

Here is the code. where I try to create a restaurant menu page. There are five buttons. Problem is when I click one to another button the .active class transition property does not working. What I did wrong here?
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector(".all");
// selecting asian menu item
var asianMenu= document.querySelector(".asian");
// selecting chinese menu item
var chnsMenu = document.querySelector(".chinese");
// selecting desi menu item
var desiMenu = document.querySelector(".desi");
// selecting desert menu item
var desertMenu = document.querySelector(".desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector(".asian-cuisine");
var chineseCuisine = document.querySelector(".chinese-cuisine");
var desiCuisine = document.querySelector(".desi-cuisine");
var desertCuisine = document.querySelector(".desert-cuisine");
// add eventlister to all the buttons
for (let i=0;i<menuDiv.length;i++){
menuDiv[i].addEventListener("click", function(e){
e.target.preventDefault;
if(e.target == asianMenu){
asianCuisine.classList.replace("hidden" ,"active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if(e.target == chnsMenu){
console.log("Kazi");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desiMenu){
console.log("Kazi");
desiCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desertMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == allMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.replace("hidden","active");
asianCuisine.classList.replace("hidden","active");
}
})
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title{
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline{
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns{
text-align: center;
margin-top: 30px;
}
.menu-btns button{
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover{
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img{
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover{
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine{
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden{
display: none;
transition: 0.5s all ease-out;
}
<div class="wrapper">
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button class="all">All Items</button>
<button class="asian">Asian Cuisine</button>
<button class="chinese">Chinese Item</button>
<button class="desi">Desi Item</button>
<button class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>

There are some problems with your understanding of a class compared to an element in your javascript code.
You are trying to call javascript functions for an element on a query you made on a class. For example, in the query below, you're returning a class to the variable asianCuisine when you intended to return an element. The "." returns a class and a "#" returns an element. In html, an element's id attribute relates to the "#" and the element's class attribute relates to the "."
var asianCuisine = document.querySelector(".asian-cuisine");
var asianCuisine = document.querySelector("#asian-cuisine");
You must also remove hidden and active attributes at the proper time.
Try the code in the jsfiddle below. It should get you where you need to be for a good start on your project. Please do more research into html classes & ids and also how they related to javascript & css "#" vs. "."
Keep in mind that there are much easier ways to do this but if someone just gives some fancy code you won't learn anything.
Code that works ---> https://jsfiddle.net/larrygrobertson/y52m1ok6/54/
I have modified your code and attempted to keep as much as I could intact.
HTML:
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button id="all" class="all">All Items</button>
<button id="asian" class="asian">Asian Cuisine</button>
<button id="chinese" class="chinese">Chinese Item</button>
<button id="desi" class="desi">Desi Item</button>
<button id="desert" class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div id="asian-cuisine" class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div id="chinese-cuisine" class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div id="desi-cuisine" class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div id="desert-cuisine" class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title {
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline {
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns {
text-align: center;
margin-top: 30px;
}
.menu-btns button {
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover {
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img {
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover {
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine {
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden {
display: none;
transition: 0.5s all ease-out;
}
JAVASCRIPT:
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector("#all");
// selecting asian menu item
var asianMenu = document.querySelector("#asian");
// selecting chinese menu item
var chnsMenu = document.querySelector("#chinese");
// selecting desi menu item
var desiMenu = document.querySelector("#desi");
// selecting desert menu item
var desertMenu = document.querySelector("#desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector("#asian-cuisine");
var chineseCuisine = document.querySelector("#chinese-cuisine");
var desiCuisine = document.querySelector("#desi-cuisine");
var desertCuisine = document.querySelector("#desert-cuisine");
// add eventlister to all the buttons
for (let i = 0; i < menuDiv.length; i++) {
menuDiv[i].addEventListener("click", function(e) {
//e.target.preventDefault;
if (e.target == asianMenu) {
console.log(asianCuisine);
removeAllActive(asianCuisine);
removeAllHidden(asianCuisine);
asianCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if (e.target == chnsMenu) {
console.log("Kazi");
removeAllActive(chineseCuisine);
removeAllHidden(chineseCuisine);
chineseCuisine.classList.add("active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desiMenu) {
console.log("Kazi");
removeAllActive(desiCuisine);
removeAllHidden(desiCuisine);
desiCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desertMenu) {
console.log("Kazi");
removeAllActive(desertCuisine);
removeAllHidden(desertCuisine);
desertCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == allMenu) {
console.log("Kazi");
desertCuisine.classList.replace("hidden", "active");
chineseCuisine.classList.replace("hidden", "active");
desiCuisine.classList.replace("hidden", "active");
asianCuisine.classList.replace("hidden", "active");
}
})
}
function removeAllActive(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("active");
}
sibling = sibling.nextSibling
}
}
function removeAllHidden(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("hidden");
}
sibling = sibling.nextSibling
}
}

How to get mouse pointer to show the hand icon when i hover on a div?

<div onclick="location.href='Some-Page.php';" class="individual col-md-4">
<img style="border: 6px solid #000; width:150px;height:150px; border-radius:25px" src="facts.jpg" alt="Some Alternate">
<h4 class="my-3">Facts</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
I cannot use the a href code here for onlclick on the div so im using location.href. This is making my mouse pointer icon stay the same when i hover on the div unlike a href where it would change to a hand icon.
Is there a way for me to get the icon for this code too when i hover over it?
Is this the only disadvantage of using this code over the regular html code or is there something else like affecting my SEO or something?
Any help is appreciated. Thank you

You can use cursor: pointer in your CSS:
#test {
width: 500px;
height: 100px;
cursor: pointer;
background: blue;
color: white;
}
<div id="test">Hello</div>

Add this class to your div:
.pointer {
cursor: pointer;
}
See the Docs: cursor
.pointer{
cursor:pointer;
}
<div class="pointer">Hello World :)</div>

Responsive Carousel issue

Can someone explain why my Responsive Carousel isn't working?
Here's my demo: https://jsfiddle.net/9b9mt0ts/
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Responsive Quote Carousel BS3</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.reactiongifs.com/r/overbite.gif" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>

Here the console error.
Mixed Content:
The page at 'https://fiddle.jshell.net/9b9mt0ts/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution: Access with "http" instead "https"
Codepen doesn't show an error.

Please add the Carousel js file in header.
http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js
Also check http protocol. If your site is not in https, then use all external link as http

Show hide available content

I have some content in my post. But I want to hide it until I click to a link in this post. I have yet to build this site, but I will say my idea.
The first Heading
The second Heading
The third Heading
The fourth Heading
/* The content following are hidden Until I clicked to a link above. /
/ Content is available wrapped in a div tag, do not loaded from another site. */
Content 1 will be show only click to "1. The first Heading"
Content 2 will be show only click to "2. The second Heading"
Content 3 will be show only click to "3. The third Heading"
Content 4 will be show only click to "4. The fourth Heading"
Can use CSS or Ajax / jQuery to create the effect?

You could do it using the following jquery code:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
Here is the complete demo how you can hide and show the element by click event.

I have made a pure css accordion that achieves the same functionality.Checkout the following link at codepen
HTML:
<div class="container">
<ul>
<li>What is java Programming Language?
<div class="acc-content" id="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
</p>
</div></li>
<li>How is javascript different from java?
<div class="acc-content" id="second">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
<li>Other front end technologies
<div class="acc-content" id="third">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}

With jQuery it can be pretty easy. By default you hide .content divs with CSS and display the corresponding one on heading click. Consider bellow example.
var $content = $('.content');
$('h2').click(function() {
$content.removeClass('show')
.filter('.content-' + $(this).data('content'))
.addClass('show');
});
.content {
display: none;
padding: 5px;
background: #EEE;
}
.content.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>
<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>

If I understand well, I would recommend to load from ajax the content on first click and then hide it instead of deleting the toggled panel and retrieve it again from AJAX each time (so that there is no wait on each click and less requests).
So here's a way of doing it:
$('.header').click(function()
{
var clickedHeader= $(this);
if (clickedHeader.next().is('.toggle:visible'))
{
clickedHeader.next().slideDown(800);
}
else if (clickedHeader.next().is('.toggle:hidden'))
{
clickedHeader.next().slideUp(800);
}
else
{
$.get(url, data, function(data)
{
// First do some treatment if needed...
clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
clickedHeader.next().slideDown(800);
});
}
});
This will work if you have HTML like this for ex.
<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>
and after each header you would toggle a div that has class '.toggle'.
Hope it helps.

We Keep Coding

JavaScript is the programming language of the Web.

jquery fade toggle div over another div when click? - javascript

Related

Trying to make the bootstrap navbar sticky with jQuery

My Transition property did not working when I click one button from another

How to get mouse pointer to show the hand icon when i hover on a div?

Responsive Carousel issue

Show hide available content

Categories

Resources