CODEWITHSUNDEEP
javascriptjqueryhtmlcss
graxia
graxia

Reputation: 271

Content doesn't show up on toggle button with jQuery

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>

Upvotes: 0

Views: 41

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

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>

Upvotes: 1

Related Questions