Content doesn't show up on toggle button with jQuery

Question

i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.

HTML:
<div id="toggle">
  <div id="poptext"> toggle </div>
  <div id="box">
    <p> hello</p>
  </div>
</div>

CSS:
#toggle {
 position: fixed;
 bottom: 0px;
 left: 50%;
 width: 240px;
 margin: 0 auto;
 margin-bottom: 10px;
 margin-left: -120px;
}

#box {
 margin: 0 auto;
 position: relative;
 margin-bottom: 10px;
 margin-top: 10px;
 border-radius: 19px;
 text-shadow: 0 1px 2px #000;
 background-color: #644d52;
 display: none;
 opacity: .9;
 }

#box p {
 margin: 0;
 padding: 5px 20px 15px 20px;
 text-align: left;
 color: #FFF;
}

#poptext {
  width: 50px;
  height: 18px;
  font-size: 14px;
  text-align: left;
  padding-left: 23px;
  overflow: hidden;
  cursor: pointer;
  margin: 0 auto;
  border-radius: 10px;
  }

 #poptext.highlight {
  background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0,   0.8);
 }

 JAVASCRIPT:
 <script>
 window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
  $(document).ready(function () {
   $('#poptext').click(function () {
    $('#poptext').toggleClass('#highlight');
    $('#box').animate({
        height: 'toggle',
        opacity: 'toggle',
        width: 'toggle'
        }, 500);
    });
});
</script>

Any error in your browser console – Arun P Johny Mar 15 '16 at 03:27 — Arun P Johny, Mar 15 '16 at 03:27

score 1 · Accepted Answer · edited May 23 '17 at 10:28

There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that

document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
  $('#poptext').click(function() {
    $('#poptext').toggleClass('#highlight');
    $('#box').animate({
      height: 'toggle',
      opacity: 'toggle',
      width: 'toggle'
    }, 500);
  });
})

#toggle {
  position: fixed;
  bottom: 0px;
  left: 50%;
  width: 240px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-left: -120px;
}
#box {
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 19px;
  text-shadow: 0 1px 2px #000;
  background-color: #644d52;
  display: none;
  opacity: .9;
}
#box p {
  margin: 0;
  padding: 5px 20px 15px 20px;
  text-align: left;
  color: #FFF;
}
#poptext {
  width: 50px;
  height: 18px;
  font-size: 14px;
  text-align: left;
  padding-left: 23px;
  overflow: hidden;
  cursor: pointer;
  margin: 0 auto;
  border-radius: 10px;
}
#poptext.highlight {
  background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}

<div id="toggle">
  <div id="poptext">toggle</div>
  <div id="box">
    <p>hello</p>
  </div>
</div>

Content doesn't show up on toggle button with jQuery

1 Answers1