We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon. I am running into issues where the content will hide and show, but the icon will not switch.
How can i get the content element and icons to switch?
Current issue:
Desired output:
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
var grandParents = hdr.parent().parent();
grandParents.find('.item.active').removeClass('active');
grandParents.find('.content').stop().slideUp().removeClass('active');
hdr.closest('.item').find('.content').stop().slideToggle();
hdr.parent().toggleClass('active');
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).
The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.
Here's the full working code. The only update I have is the js part.
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
hdr.siblings('.content').slideToggle();
hdr.parent().toggleClass('active');
hdr.parent().siblings().find('.content').slideUp();
hdr.parent().siblings().removeClass('active');
if(hdr.parent().hasClass('active')) {
hdr.parent().find('svg').remove();
hdr.parent().siblings().find('svg').remove();
hdr.prepend('<i class="fas fa-minus"></i>');
hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
} else {
hdr.parent().find('svg').remove();
hdr.prepend('<i class="fas fa-plus"></i>');
}
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like
1st Accordion - a.png
2nd accordion - b.png and so on.
I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.
Related
I want to put hover into the element inside the sidebar that I already have.
I try to use hover ,but it seems not working. I appreciate every answer.
.sidebar .navbar .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header row ">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
</div>
</header>
<div class="body row ">
<div class="sidebar col-2 " id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<div class="content col-10"> Content
</div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
your css selector is wrong
this will solve your problem
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
Is your css code connected to html?
Maybe nav-item class overrides. Use nav-link class with !important
More information: https://www.w3schools.com/css/css_important.asp
I see your selector is incorrect.
On your html you have navbar-nav so you'll have to use .navbar-nav on your selector.
your html
...
<!--sidebar start-->
<div class="navbar-nav w-100">
...
so the updated selector is
.sidebar .navbar-nav .nav-link:hover
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
That will solve the problem.
Basically, there are four containers, each containing an image, I added a script that provides the ability to view the full image. But this function only works for the first container.
const img = document.querySelector("img");
const icons = document.querySelector(".icons");
img.onclick = function(){
this.classList.toggle("active");
icons.classList.toggle("active");
}
Html:
<div class="container">
<div class="wrapper">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Jeffrey
</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</p>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
Updated HTML (1), some details; I changed the names for each container and wrapper, created different CSS files for each new one and it did not work, here is a part of the new updated html:
<div class="container3">
<div class="wrapper3">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Name</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
<script>
const images = [...document.querySelectorAll(".wrapper img, .wrapper1 img, .wrapper2 img, .wrapper3 img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
</script>
Modify this to your liking. Have fun...
const images = [...document.querySelectorAll(".images-2 img, .images img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
});
});
.images,
.images-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.images-2 img,
.images img {
box-sizing: border-box;
width: 200px;
height: 100px;
object-fit: cover;
object-position: center;
margin-bottom: 1rem;
transition: all 250ms linear;
cursor: pointer;
}
.images-2 img.active,
.images img.active {
transform: scale(1.2);
box-shadow: 0px 10px 25px -10px #333;
}
<div class="images">
<img src="https://placeimg.com/640/480/nature?1" />
<img src="https://placeimg.com/640/480/nature?2" />
<img src="https://placeimg.com/640/480/nature?3" />
</div>
<div class="images-2">
<img src="https://placeimg.com/640/480/nature?4" />
<img src="https://placeimg.com/640/480/nature?5" />
<img src="https://placeimg.com/640/480/nature?6" />
</div>
You need querySelectorAll and a for loop.
Try:
const img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", function(e){
console.log(e);
});
}
In the code shown below, I have a post and in there is a comment button that will slide the comment box into view from the right. I'm resizing the main post element from 100% of the parent to 67% of the parent (col-lg-12 to col-lg-8). Although I'm trying to get the post element to simultaneously move with the entrance of the comment element.
Also in my fiddle i can't seem to fix how the comment slides all the way across the entire post element, rather than just a portion of it. Additionally, I can't fix the animation where it just appears rather than slides in, although the slide out animation works.
This is my JSFiddle
The code snippet below oddly doesn't work like jsfiddle does.
$('body').on('click', '#comments', function(e) {
var name = $(this).attr('name');
var style = $("#comments-body-" + name).prop('class');
if (style == "col-lg-4 hide") {
$("#post-card-" + name).prop('class', 'col-lg-8');
$("#comments-body-" + name).show("slide", {
direction: "right"
}, 1000, function() {
$("#comments-body-" + name).prop('class', 'col-lg-4 show');
});
} else if (style == "col-lg-4 show") {
$("#comments-body-" + name).hide("slide", {
direction: "right"
}, 1000, function() {
$("#post-card-" + name).prop('class', 'col-lg-12');
$("#comments-body-" + name).prop('class', 'col-lg-4 hide');
});
}
});
.quantity {
border-radius: 100px;
background: #dc3545;
color: white;
padding: 1px 6px;
}
span #comments {
cursor: pointer;
}
span #comments:hover {
color: blue;
}
.divider {
position: relative;
Float: left;
height: 100%;
width: 1px;
background-color: rgba(0, 0, 0, .125)
}
.comment-body {
padding: 0.75rem !important;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="all">
<link href="https://nofile.io/f/RA9FgtoD8yG/master.css" rel="stylesheet" media="all">
<body>
<div id="main-content" class="main-content">
<div id="notices" class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Notices</h2>
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#newPostModal">
<i class="zmdi zmdi-plus"></i>new post</button>
</div><br />
<div id="$id" class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-8">
<strong class="card-title">
yeet
</strong>
</div>
<div class="col-lg-4">
<span style="cursor:pointer;" class="float-right">
<a id="remove-notice">
<i class="fas fa-times"></i>
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<span>
<small><span class="float-right" id="comments" name="1">Comments <span class="quantity"><bold>1</bold></span></span>
</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div id="post-card-1" class="col-lg-12" style="position:relative;">
xdxddxd
</div>
<div class="col-lg-4 hide" id="comments-body-1">
<div class="divider"></div>
<div style="margin-left:2vw;">
<div style="vertical-align:middle;">
<strong>Comments</strong>
<button class="au-btn au-btn-icon au-btn--blue" style="line-height:25px!important;padding:0 5px!important;float:right;"><i class="zmdi zmdi-plus"></i>comment</button>
</div>
<br />
<div class="card">
<div class="card-body comment-body" style="position:relative;">
<strong> User </strong><br/>
<p>
shfashfihgliahgal
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Okay, I hope you are still watching this question.
First, why your show("slide" is failed. Let's watch this code.
$(function() {
$("#button1").on("click", function() {
// fade in. (but it doens't show due to priority problem.)
$("#target1").fadeIn("slow", function() {
// It shows at this timing.
$("#target1").prop("class", "col-sm-4 show");
});
});
$("#button2").on("click", function() {
// fade in.
$("#target2").fadeIn("slow");
});
});
.hide {
display: none !important;
}
.display-none {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target1" class="col-sm-4 hide">
Hello my name is col-sm-4! for display:none !important;
</div>
<div id="target2" class="col-sm-4 display-none">
Hello my name is col-sm-4! for display:none;
</div>
<input type="button" class="button" value="show col-sm-4" id="button1">
<input type="button" class="button" value="show col-sm-4" id="button2">
Next, you want to move the entire post element.
Maybe I'm misunderstanding.
But I did fix some problem that what I thought.
Can you have a look? if anything, feel free to question me.
For Example.
I have this side bar with a bunch of <a href> linked to the same page
I have this JS code, but the previous <a href> link does not change back to tab-title and remains active
I would want it so that when the user clicks a link, the <a href> would change from class="tab-title" to class="tab-title-active"
$(document).ready(function() {
$('a').click(function() {
$(this).removeClass('tab-title');
$(this).addClass('tab-title-active');
$(this).siblings().removeClass('tab-title-active');
$(this).siblings().addClass('tab-title');
console.log($(this).attr("class"));
});
});
a.tab-title{
font-size: 18px;
font-weight: 400;
list-style: none;
color: #444;
margin-top: 10px;
}
a.tab-title-active{
font-size: 18px;
font-weight: bold;
list-style: none;
color: #0091e4;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
<div class="tab">
<h5>Binary</h5>
</div>
<div class="tab">
<h5>About</h5>
</div>
<div class="tab">
<h5>Representation</h5>
</div>
</div>
<div class="content">
<h1 class="tab-title" id="tab-title-0">Binary</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-1">About</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-2">Representation</h1>
<p>
<!-- stuff written -->
</p>
</div>
$(document).ready(function() {
$('a').click(function() {
$('a').removeClass('tab-title-active');//this would remove active class from previous hyperlinks and the remaining code will apply the same
$(this).removeClass('tab-title');
$(this).addClass('tab-title-active');
$(this).siblings().removeClass('tab-title-active');
$(this).siblings().addClass('tab-title');
console.log($(this));
});
});
Remove the class tab-title-active from all anchor tags then add it back on the current target
$(document).ready(function() {
$('a').click(function() {
// removing the class from element which have this class
$('.tab-title-active').removeClass('tab-title-active');
// adding it to the selected element
$(this).addClass('tab-title-active')
});
});
.tab-title {
color: green
}
.tab-title-active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
<div class="tab">
<h5>Binary</h5>
</div>
<div class="tab">
<h5>About</h5>
</div>
<div class="tab">
<h5>Representation</h5>
</div>
</div>
<div class="content">
<h1 class="tab-title" id="tab-title-0">Binary</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-1">About</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-2">Representation</h1>
<p>
<!-- stuff written -->
</p>
</div>
You need change All a tag classname .tab-title-active to tab-title.Then add a class with this classname with .tab-title-active
Working snippet
$(document).ready(function() {
$('a').click(function() {
$('a').removeClass('tab-title-active').addClass('tab-title');
$(this).addClass('tab-title-active');
console.log($(this).attr('class'));
});
});
a.tab-title {
font-size: 18px;
font-weight: 400;
list-style: none;
color: #444;
margin-top: 10px;
}
a.tab-title-active {
font-size: 18px;
font-weight: bold;
list-style: none;
color: #0091e4;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
<div class="tab">
<h5>Binary</h5>
</div>
<div class="tab">
<h5>About</h5>
</div>
<div class="tab">
<h5>Representation</h5>
</div>
</div>
<div class="content">
<h1 class="tab-title" id="tab-title-0">Binary</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-1">About</h1>
<p>
<!-- stuff written -->
</p>
<h1 class="tab-title" id="tab-title-2">Representation</h1>
<p>
<!-- stuff written -->
</p>
</div>
I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).
I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.
$('.button-collapse').sideNav({
menuWidth: 260,
edge: 'left',
closeOnClick: true
}
);
//Unbind sidenav click to close
$(function(){
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
html,body {
height: 100%;
background-color:
}
header, main, footer, header{
padding-left: 0 auto;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.text1 {
color: #212121;
}
.text2 {
color: #757575;
}
nav.top-nav {
background-color: #303F9F;
}
.title-text {
font-family: Roboto;
font-weight: bold;
}
a.bold, .bold {
font-family: Roboto;
font-weight: bold;
}
a.light, .light {
font-family: Roboto;
font-weight: normal;
}
#sidenav-overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav class="top-nav">
<div class="container">
<i class="material-icons">menu</i>
<div class="navbar-wrapper">
Icy Fire
</div>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li>Account</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
Index
</div>
</li>
</ul>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>
<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
</div>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>
</div>
<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
<h5 class="indigo-text"><?php getMsg(); ?></h5>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
Here it is on my website: link
You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.
it is because of your drag target is drag-target right is 0 which blocks your button which is position to right
remove the css attribute
right: 0;
in your drag-target element