so i'm a bit confused as why the code im working off isn't working as expected, so any help would be good.
so let me explain im working on an expanding/ collapsing menu, when the a tag is clicked a class is added and css is added to make this happen, and also the class is removed from the other links.
CSS code:
a {
max-height: 0;
overflow: hidden;
transition: 0.5s ease-in-out
}
a.clicked {
max-height: 600px;
}
html code:
<ul>
<li><a onclick='mobileMenu(event)'>link 1</a><li>
<li><a onclick='mobileMenu(event)'>link 2</a><li>
<li><a onclick='mobileMenu(event)'>link 3</a><li>
<li><a onclick='mobileMenu(event)'>link 4</a><li>
</ul>
for this post i kept the html pretty simple but if it needs to be more detailed let me know.
Each link has a onclick attached.
Javascript code:
function mobileMenu(event) {
event.currentTarget.classList.toggle("clicked");
[].forEach.call(document.querySelectorAll('ul li a'), function(a){
a.classList.remove('clicked');
});
}
so this code mostly works where you click a link is adds 'clicked' class and also removes the 'clicked' class from any other links except the current link, which is good because im using this as a collapse-able menu so you click another link it opens it while also closing any other link currently open.
My problem is is the js code above to add the clicked class i'm using a '.toggle' but this only adds the 'clicked' class but does not toggle it. I want to be able to toggle the 'clicked' class and also remove it from others links. so im not sure if its a simple oversight on my part but im not sure where im going wrong and why the '.toggle' isn't actually toggling the class.
Thanks.
You can try a if statement. It will always remove the checked from all links, and if the event.target is not checked, it will add the class checked.
function mobileMenu(event) {
const checked = event.currentTarget.classList.contains('clicked')
[].forEach.call(document.querySelectorAll('ul li a'), function(a){
a.classList.remove('clicked');
});
if (checked) return;
event.currentTarget.classList.toggle("clicked");
}
As per comment the right way to add event listeners is using .addEventListener().
In the event listener you can search for an anchor with a class clicked and if any remove the class. After you can add the class to the current element:
document.querySelectorAll('ul li a').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
var clickedEle = document.querySelector('ul li a.clicked');
if (clickedEle != null)
clickedEle.classList.remove('clicked');
this.classList.add('clicked');
})
});
a {
max-height: 0;
overflow: hidden;
transition: 0.5s ease-in-out
}
a.clicked {
max-height: 600px;
color: blue;
}
<ul>
<li><a>link 1</a><li>
<li><a>link 2</a><li>
<li><a>link 3</a><li>
<li><a>link 4</a><li>
</ul>
Related
So I'm using a CMS that doesn't allow me to apply an onclick on the a tag or use an onclick. So it basically outputs in code like the following:
<ul class="ul-class" id="ul-id">
<li class="nav-items">Something1</li>
<li class="nav-items">Something2</li>
<li class="nav-items">Something3</li>
<li class="nav-items">Something4</li>
<li class="nav-items">Something5</li>
</ul>
What I need to be able to do is apply a class showing an underline on the link that's been clicked that then leaves if another link has been clicked. Unfortunately I cannot get the class to stay present with the click.
I've tried this: JS Onclick Add Class
But the OP was using an onclick to latch onto.
What I've ended up with is this:
$(".nav-items").click(function (e) {
$(this).addClass("nav-active").siblings().removeClass("nav-active");
});
Then for the CSS I have:
a.nav-active{
border-bottom: 5px solid green;
padding-bottom: 10px;
}
The border pops up but leaves immediately. Is there something wrong with the code or do I need to put something else in to make the border permanent unless clicked elsewhere?
You can do something like:
Note: You have to use .nav-active instead of a.nav-active because your .nav-active is <li> and an <a>
$(function() {
$(".nav-items").click(function(e) {
e.preventDefault(); /* To prevent redirect of <a> */
$(".nav-items").removeClass("nav-active"); /* Remove the class to all nav-items */
$(this).addClass("nav-active"); /* Add the class to clicked nav-items*/
});
});
.nav-active {
border-bottom: 5px solid green;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-class" id="ul-id">
<li class="nav-items">Something1</li>
<li class="nav-items">Something2</li>
<li class="nav-items">Something3</li>
<li class="nav-items">Something4</li>
<li class="nav-items">Something5</li>
</ul>
A possible approach with plain JavaScript
var myItems = Array.from(document.querySelectorAll(".nav-items")); // make array from NodeList
myItems.forEach(navItem => navItem.addEventListener("click", event => {
myItems.forEach(maybeSelectedBefore => maybeSelectedBefore.classList.remove("nav-active"));
event.target.classList.toggle("nav-active", true);
});
I had to reverse your CSS (to .nav-active a instead of a.nav-active) and add e.preventDefault(); to the jQuery, but otherwise it seems to be working. It wouldn't hurt to remove the class first before adding it, so change
$(this).addClass("nav-active").siblings().removeClass("nav-active");
to
$(this).siblings().removeClass("nav-active");
$(this).addClass("nav-active");
I've an unordered list.
<div class="categories-list">
<ul class="display_categories">
<li>
<a class="title"><span><b>1</b></span></a>
<ul class="display_subcategories">
<li><a>22</a></li>
<li><a>22</a></li>
</ul>
</li>
<li>
<a class="title"><span><b>1</b></span></a>
<ul class="display_subcategories">
<li><a>22</a></li>
<li><a>22</a></li>
</ul>
</li>
</ul>
</div>
I want that when a user clicks on any category, its sub-category should slidedown and whenever the same category is clicked, nothing should happen. Here's my jQuery
$('.display_subcategories').hide()
$('.title').click(function(){
$('.display_categories').children().children('ul').slideUp('fast');
$(this).next().slideDown('fast');
})
but what happens is that upon clicking on the already slideDown category, it again slides up and then slides down.
Here is the jsFiddle link
You can slideDown the current submenu, then use not() to slideUp() all except the current, like this:
$('.display_subcategories').hide()
$('.title').click(function() {
var $submenu = $(this).next().slideDown('fast');
$('.display_categories').find('> li > ul').not($submenu).slideUp('fast');
});
Updated fiddle
Note also the use of find() with the descendant selector over chained children() calls.
Try this
$('.display_subcategories').hide();
$('.title').click(function(){
if(!$(this).hasClass('down')){
$('.title').removeClass('down');
$('.display_categories').children().children('ul').slideUp('fast');
$(this).next().slideDown('fast');
$(this).addClass('down');
}
})
Updated JS Fiddle
I would suggest letting CSS manage your animations by triggering or disabling classes. A simple example would be adding the .active class to an open <ul>, and the following CSS:
.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; }
.display_subcategories.active { max-height: 50px; }
Here is a modified JSFiddle with my suggestion.
I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.
Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/
There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
If you insist on using jQuery, you can try this
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
This approach is highly frowned upon though
In jQuery, you could do it like this:
$(document).ready(function() {
// Make the first active
$(".overlay:first").addClass("active");
// On hover remove all active classes from .overlay
// and add .active only to the one that is hovered
$(".overlay").hover(function() {
$(".overlay").removeClass("active");
$(this).addClass("active");
});
});
but Richard Hamilton's answer is much better and cleaner.
You can use jQuery's on. For example:
$(".overlay:first").addClass("active");
$(".overlay").on("hover", function(){
$(this).addClass("active");
$(".overlay:first").removeClass("active")
});
I have a parent <div>, #amwcontentwrapper, which has a series of divs within it with their own classes and ids.
I want to use jQuery to select these child divs, and IF they have the class .amwhidden, do nothing, but if not, remove the .amwshown class and add the .amwhidden class.
This is what I have so far, but it is not working. I think it may be my selecting of the child divs within the parent.
Can anybody see any obvious problems? Thanks for your help.
if ($('#amwcontentwrapper > div').hasClass('amwhidden')){
} else {
$('#amwcontentwrapper > div').fadeIn(600, function(){
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
And here is the basic html that I am using:
<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>
UPDATE: Using War10ck's solution in the comments below (i.e. $('#amwcontentwrapper > div.amwshown')) I have managed to get the classes changing as I wished. However, those which have had the .amwshown class removed and .amwhidden class added still show on the page, despite the CSS looking like this:
.amwhidden {
display:none;
}
.amwshown {
display:block;
}
Looking at the Dev Tools, it seems that, when the jQuery is run (on a click event) the classes are changing, but any classes which are having the .amwshown class added (thus displaying them on the page) are also having the a <style> tag added to them which makes them display:block;
When I then press another button, which should hide the aformentioned <div> to make way for another one, the class is being changed to .amwhidden, but that <style> tag is not being deleted, so even though it has the .amwhidden class, it is still on the page.
I've created a JSFiddle here, if anybody still wants to help!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>
`
You can use not to remove the elements you do not want, like this:
$('#amwcontentwrapper > div').not('.amwhidden')
.removeClass('amwshown')
.addClass('amwhidden');
And work with that.
Try this
$(document).ready(function() {
$("#amwcontentwrapper").children().each(function(elem, x) {
if ($(x).attr("class") == "amwhidden") {
alert($(x).attr("class"));
$(x).removeClass("amwhidden").addClass("amwshow");
alert($(x).attr("class"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="amwcontentwrapper">
<div class="amwhidden"></div>
<div></div>
<div></div>
</div>
You can try each as follow,
$("#amwcontentwrapper div").each(function(){
if($(this).hasClass('amwhidden'))
//DO something
else
//DO something
});
Thank you for all help, it has prompted some brainstorming which has solved this issue.
Instead of adding the .amwhidden class and removing the .amwhidden class using jQuery, I have just created a .amwsection class, which all the sections belong to which has an initial display value of none. So far, so good; all of the sections are not there when you load up the page.
Then I use the .css jQuery function to change the display:none to display:block when the corresponding button is clicked, and changing all other .amwsections to display:none. This works just fine, but the effect is quite abrupt; there is no fading in, as you would get if you used the .animate function. .animate, however, does not work with the display value.
.fadeOut and .fadeIn to the rescue! By wrapping the .css change in these, I can create a fading in/out effect and can still use the display value.
Here is one example of this code.
The #buybutton is the button to be pressed.
#amwintro is just something which appears when the page loads - it will now be set to display:none if this is the first button pressed.
The .amwsection are all of the hidden sections. This portion of the code just resets all of them. This and the #amwintro section happen very quickly (1/100th of a second) to keep response time good.
The #amwbuy is the specific section that I want to reveal. As you can see, this fades in over a longer period.
Currently only tested in Chrome, but I think I've got it!
$(document).ready(function () {
$('#buybutton').click(function() {
$('#amwintro').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('.amwsection').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('#amwbuy').fadeIn(600, function() {
$(this).css({
display:'block',
});
});
});
});
I want to change the style (second line below) to remove the display: none; part when the user clicks on the "Show All Tags" link. If the user clicks the "Show All Tags" link again, I need the display: none; text added back in to the "style..." statement.
Show All Tags
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
I've searched here and Google for an example I can apply to my situation. I've found plenty of examples using 2 DIV blocks to show/hide. I really need to do it this way, by modifying the html style element. Does anyone have an example (or provide a link to an example) that does this type of toggle wtih the display: none text.
Give your ul an id,
<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
then do
var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';
IF you're using jQuery, this becomes:
var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');
Finally, you specifically said that you wanted to manipulate this css property, and not simply show or hide the underlying element. Nonetheless I'll mention that with jQuery
$("#yourUlId").toggle();
will alternate between showing or hiding this element.
Give the UL an ID and use the getElementById function:
<html>
<body>
<script>
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
</script>
Show All Tags
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Others have answered your question perfectly, but I just thought I would throw out another way. It's always a good idea to separate HTML markup, CSS styling, and javascript code when possible. The cleanest way to hide something, with that in mind, is using a class. It allows the definition of "hide" to be defined in the CSS where it belongs. Using this method, you could later decide you want the ul to hide by scrolling up or fading away using CSS transition, all without changing your HTML or code. This is longer, but I feel it's a better overall solution.
Demo: http://jsfiddle.net/ThinkingStiff/RkQCF/
HTML:
<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>
CSS:
#subforms {
overflow-x: visible;
overflow-y: visible;
}
.hide {
display: none;
}
Script:
document.getElementById( 'showTags' ).addEventListener( 'click', function () {
document.getElementById( 'subforms' ).toggleClass( 'hide' );
}, false );
Element.prototype.toggleClass = function ( className ) {
if( this.className.split( ' ' ).indexOf( className ) == -1 ) {
this.className = ( this.className + ' ' + className ).trim();
} else {
this.className = this.className.replace( new RegExp( '(\\s|^)' + className + '(\\s|$)' ), ' ' ).trim();
};
};
LEVEL - I
document.querySelector('.my-btn').addEventListener('click', myFunction);
function myFunction() {
document.querySelector('.subforums').classList.toggle("off");
}
.off {
display: none;
}
Show All Tags
<div class="subforums off">My text...</div>
LEVEL - II
Toggle hide element Id end className...
function toggleElem(newElem) {
var elem = document.getElementById('' + newElem + '');
var eIdent = (elem != null) ? ('#' + newElem) : ('.' + newElem);
elem = document.querySelector('' + eIdent + '');
elem.style.display = (elem.style.display != 'none') ? 'none' : 'block';
}
You can test directly from this link: https://codepen.io/pedro404/pen/VwmPBee
You can do this through straight javascript and DOM, but I really recommend learning JQuery. Here is a function you can use to actually toggle that object.
http://api.jquery.com/toggle/
EDIT: Adding the actual code:
Solution:
HTML snippet:
Show All Tags
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
<li>Tag 4</li>
<li>Tag 5</li>
</ul>
Javascript code using JQuery from Google's Content Distribution Network: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
$(function() {
$('#showAll').click(function(){ //Adds click event listener
$('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect.
});
});
You can test directly from this link: http://jsfiddle.net/vssJr/5/
Additional Comments on JQuery:
Someone has suggested that using JQuery for something like this is wrong because it is a 50k Library. I have a strong opinion against that.
JQuery is widely used because of the huge advantages it offers (like many other javascript frameworks). Additionally, JQuery is hosted by Content Distribution Networks (CDNs) like Google's CDN that will guarantee that the library is cached in the client's browser. It will have minimal impact on the client.
Additionally, with JQuery you can use powerful selectors, adding event listener, and use functions that are for the most part guaranteed to be cross-browser.
If you are a beginner and want to learn Javascript, please don't discount frameworks like JQuery. It will make your life so much easier.