Im trying to implement accordion menu. I did that and it's not working. I just want to do toggle icon
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
transform:rotate(450deg);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow"></i>
</a>
In order for the transform property to work, try to set display: block or display:inline-block within the .my-arrow.down class:
.my-arrow.down {
display: block;
transform:rotate(450deg);
...
You also need to include content within your <i> element. For example, you could use the > character:
<i class="fa fa-angle-right my-arrow">
>
</i>
Here is a working example with your code and my modifications:
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
display: inline-block;
transform:rotate(450deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow">></i>
</a>
Related
Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.
<body>
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle" id="not-active"></i>
<i class="fa fa-plane" id="not-active"></i>
<i class="fa fa-ship" id="not-active"></i>
<i class="fa fa-fighter-jet" id="not-active"></i>
<i class="fa fa-space-shuttle" id="not-active"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
</div>
</body>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
let currentImg = $('#active');
let nextImg = currentImg.next();
if(currentImg.length){
currentImg.removeAttr('#active').css('z-inex', -10)
nextImg.attr('#active').css('z-index', 10);
}
});
});
First of all, I recommend using class instead of id. Even if you are going to use id, it is not recommended to use this way. The id value must be uniq. In your case, your ID's are not uniq. And also this is better to use like this ID selector.
id="notActive"
You can just try with each function to get current div. I tried with your code but did not work, with each yes.
$('.fa').each(function(){
if( $(this).hasClass('active') ){
currentImg = $(this);
}
})
And bonus : You can also use current div index value, then you dont have to use prev, next. You can increase or decrease index the value one by one. Just a suggestion.
You are using the id attribute incorrectly, as every id must be unique.
Also, setting the z-index on elements has no effect.
Finally, jQuery is not helping and can be eliminated.
Here's a more standard way to make something active/inactive, using a class named `active':
// control buttons
const right = document.querySelector('.right-arrow');
// handle right click
right.onclick = function() {
const activeImg = document.querySelector('i.active');
const nextImg = activeImg.nextElementSibling;
if (activeImg && nextImg) {
activeImg.classList.remove('active');
nextImg.classList.add('active');
}
};
i {
font-size: 32px;
z-index: -10; /* this has no effect */
}
.active {
z-index: 10;
background-color: yellow;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
right-arrow
</div>
</div>
</div>
I have these buttons in HTML code (I cannot change this code):
<a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i>
Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement"></i> Novo Aviso
</a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i> Visualização do aluno
</a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics"><i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
And I want to hide the buttons "Visualizar análise do curso" and "visualizar fluxo do curso". I try this JS:
function hidebutton(){
const btn = document.querySelectorAll("a.button-sidebar-wide");
btn
btn.forEach(btn=>{
btn.style.display = "none";
})
}
But this hide all buttons.
In order for you to be able to target specific elements they need to have specific traits, all the buttons are being hidden because all of them match with your selector query.
But, if try to find is unique there you'll encounter the <i> tags with some very specific classes.
So you can select those elements and hide their parents as follows:
( you can test this right now )
document.querySelectorAll('i.icon-analytics,i.icon-stats').forEach(i => i.parentNode.style='display:none')
a {display:block}
<div>
<a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i> Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement">
</i> Novo Aviso </a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i>Visualização do aluno </a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics">
<i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
If you want only to hide the first and last buttons, you can do this.
function hidebutton(){
const btns = document.querySelectorAll("a.button-sidebar-wide");
btns[0].style.display = "none";
btns[btns.length-1].style.display = "none;"
}
You can also use nth-child as long as the button order quantity and order don't change; you can use these as JS selectors as well:
.btn {
background: #efefef;
padding: 1em;
display: inline-block;
}
div .btn:nth-child(1),
div .btn:nth-child(4) {
display: none;
}
<div><a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i>
Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement"></i> Novo Aviso
</a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i> Visualização do aluno
</a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics"><i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
You can use CSS selectors in querySelectorAll to get specific elements. If you know how to select the element is CSS, you'll know how to do it in JS by querying the same lines. Like with the :first-of-type selector, for example. And then loop over the result of that query to change the style.display property.
function hideButtons() {
const firstAndLastButtons = document.querySelectorAll(`
a.button-sidebar-wide:first-of-type,
a.button-sidebar-wide:last-of-type
`);
for (const button of firstAndLastButtons) {
button.style.display = none;
}
}
I have a list and I want to add an effect to the item selected after click. For example when I click to the first item 'Complémentaire forfait' I want to see an effect to know which item is selected from the list.
Here is my HTML. I want to know if I can do what I want with Javascript or jQuery?
<div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
<a class="mdc-list-item" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
<i class="architect_aarrow material-icons" style="margin-right:10px">
add_circle_outline
</i>Architectes, Ingénieurs et Techniciens
</a>
</div>
<div class="collapse" id="architect" style="margin-left:6px">
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list" style="width:100%">
<a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Complémentaire forfait
</a>
<a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Plafonds complémentaire
</a>
<a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Invalidité décès
</a>
</nav>
</div>
My file js :
$("mdc-list-item").on("click", function () {
$(this).toggleClass("list-item-clicked");
});
My css :
.list-item-clicked{
border: 1px solid black;
}
You just have to declare a css rule like:
.list-item-clicked{
border: 1px solid black;
}
then add an on click listener to your list items and add or remove the css style to the items when clicked.
With jQuery you can use the toggleClass function.
an implementation could look like this:
$(".mdc-list-item").on("click", function(){
$( this ).toggleClass("list-item-clicked");
})
There you add the click listener to all of your items with css class "mdc-list-item" and toggle the class of the specific item.
Toggle class adds the class in parameter if the item does not has it already and removes it when it has it.
$('.mdc-list-item').on("click",function(){
var isClicked = $(this).hasClass("list-item-clicked"); // am I clicked?
$('.mdc-list-item').removeClass("list-item-clicked"); // un-click everything
if(!isClicked)
$(this).toggleClass("list-item-clicked"); // click me if needed
})
.list-item-clicked {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='mdc-list-item'>First title</a><br/>
<a class='mdc-list-item'>Second title</a><br/>
<a class='mdc-list-item'>Third title</a><br/>
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
I don't understand... if i replace remove font awesome and use text() instead of html() this will work... But if i try the same code using font awesome icons, nothing happens and the text isn't changing on the button. What am i doing wrong ?
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
</a>
<script>
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
$('.read-more').on('click', function() {
if ($('.view-more-images').html() == '<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>') {
$('.view-more-images').html('- VIEW LESS IMAGES -');
} else {
$('.view-more-images').html('<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>');
}
});
$('.read-more').on('click', function() {
$('.view-more-toggle').css({ 'display': 'block' });
});
});
</script>
I would instead use a relative children selector and toggle combined with having one hidden by default. I added some CSS to make your cursor a pointer and prevent the user from accidenly selecting text when spam clicking.
$( document ).ready(function() {
$('.read-more').on('click', function() {
$(this).children().toggle();
});
});
.read-more {
cursor:pointer;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
<span class="view-more-images" style="display:none" id="view-less-images"><i class="fa fa-minus" aria-hidden="true"></i> VIEW LESS IMAGES <i class="fa fa-minus" aria-hidden="true"></i></span>
</a>