Brandon Lawrence Brandon Lawrence - 2 months ago 6
CSS Question

Jquery if an ID is equal to "X" OR "Y" do not run function

Basically, I would like to know if there's a way to bypass/turn off/not execute a function if the id is equal to "x" or "y".

I have installed this function that animates anchor links to their respective areas/anchors on the page. i.e. if I click on the button it animates down the page to the area that the button is referencing.

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {

e.preventDefault();

var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});


...which is working with any href that has a #.

I need to add a show more area using SCSS function on the same page. I have added the example here: https://codepen.io/ojbravo/pen/YPJpXe

Which works on it's own, but uses the animation above since it has a # in the href area. Therefore, the page does a shimmy up and down before it "Shows more". I hate it and want it gone

What I would like to do is turn off the anchor animation above for these two links on the page with an ID of "show-rm" and "hide-rm" when the link is clicked.

This is the code on the page:

<div class="panel-wrapper-rm">
<a href="#show-rm" class="show-rm btn-rm" id="show-rm">Show Full Article</a>
<a href="#hide-rm" class="hide-rm btn-rm" id="hide-rm">Hide Full Article</a>
<div class="panel-rm">

<p>fkjadsljfal;s kadfjas jkdajfkl;das jfklajfkl;a jadkljfkadl jdjfl;da
jk fl;kadjf kl;asdjfkl jdaklfj akl;jd flk;ajd l;kjflk;adj
fkl;adjfkdj kl;adjfklda jlkajflka jlk;fj daklsjfkldj kaljfkl;adj
kl;fjadl ;jfal;jd fklj fkasjf l;kajalk;j fkl;dj klajdfakls;d
jfl;akdfj adkjfl ajfd
</p>



</div><!-- end panel -->
<div class="fade-rm"></div>
</div><!-- end panel-wrapper -->

Answer

You can use :not selector to exclude some selection from your selector

$('a[href^="#"]:not(#show-rm,#hide-rm)')

Or the cleaner .not method

The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.

$('a[href^="#"]').not('#show-rm,#hide-rm')
Comments