fadeToggle is not a function












0















I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...



I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!



        <nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>

<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>


And this is the JS



$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});


Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!



P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.



Thank you in advance!










share|improve this question























  • What version of Jquery are you using, looking at this question it needs to be above v1.4.4

    – George
    Nov 20 '18 at 15:32











  • Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

    – Ricardo Bueno
    Nov 20 '18 at 15:37











  • With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

    – Taplar
    Nov 20 '18 at 15:38











  • It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

    – Ricardo Bueno
    Nov 20 '18 at 15:42











  • <script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    – Ricardo Bueno
    Nov 20 '18 at 15:42
















0















I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...



I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!



        <nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>

<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>


And this is the JS



$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});


Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!



P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.



Thank you in advance!










share|improve this question























  • What version of Jquery are you using, looking at this question it needs to be above v1.4.4

    – George
    Nov 20 '18 at 15:32











  • Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

    – Ricardo Bueno
    Nov 20 '18 at 15:37











  • With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

    – Taplar
    Nov 20 '18 at 15:38











  • It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

    – Ricardo Bueno
    Nov 20 '18 at 15:42











  • <script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    – Ricardo Bueno
    Nov 20 '18 at 15:42














0












0








0








I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...



I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!



        <nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>

<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>


And this is the JS



$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});


Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!



P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.



Thank you in advance!










share|improve this question














I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...



I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!



        <nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>

<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>


And this is the JS



$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});


Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!



P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.



Thank you in advance!







javascript jquery twitter-bootstrap navigation






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 20 '18 at 15:30









Ricardo BuenoRicardo Bueno

11




11













  • What version of Jquery are you using, looking at this question it needs to be above v1.4.4

    – George
    Nov 20 '18 at 15:32











  • Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

    – Ricardo Bueno
    Nov 20 '18 at 15:37











  • With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

    – Taplar
    Nov 20 '18 at 15:38











  • It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

    – Ricardo Bueno
    Nov 20 '18 at 15:42











  • <script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    – Ricardo Bueno
    Nov 20 '18 at 15:42



















  • What version of Jquery are you using, looking at this question it needs to be above v1.4.4

    – George
    Nov 20 '18 at 15:32











  • Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

    – Ricardo Bueno
    Nov 20 '18 at 15:37











  • With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

    – Taplar
    Nov 20 '18 at 15:38











  • It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

    – Ricardo Bueno
    Nov 20 '18 at 15:42











  • <script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    – Ricardo Bueno
    Nov 20 '18 at 15:42

















What version of Jquery are you using, looking at this question it needs to be above v1.4.4

– George
Nov 20 '18 at 15:32





What version of Jquery are you using, looking at this question it needs to be above v1.4.4

– George
Nov 20 '18 at 15:32













Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

– Ricardo Bueno
Nov 20 '18 at 15:37





Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.

– Ricardo Bueno
Nov 20 '18 at 15:37













With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

– Taplar
Nov 20 '18 at 15:38





With the page fully loaded, if you open your console and type jQuery.fn.fadeToggle what does it say?

– Taplar
Nov 20 '18 at 15:38













It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

– Ricardo Bueno
Nov 20 '18 at 15:42





It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.

– Ricardo Bueno
Nov 20 '18 at 15:42













<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

– Ricardo Bueno
Nov 20 '18 at 15:42





<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

– Ricardo Bueno
Nov 20 '18 at 15:42












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396350%2ffadetoggle-is-not-a-function%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396350%2ffadetoggle-is-not-a-function%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Can a sorcerer learn a 5th-level spell early by creating spell slots using the Font of Magic feature?

ts Property 'filter' does not exist on type '{}'

mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window