Forums

DesignLady94

I am trying to activate a couple of javascript plugins in Bootstrap but so far, neither are working. Here's the script I am using for each:

Accordion:

      $(document).ready(function() {
      $('a.accordion-toggle').collapse({
    toggle: false
    })

  <div class="accordion-group">
                <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <h3>Web Content</h3> 
                </a></div>
            <div id="webContent" class="accordion-body collapse in">
            <div class="accordion-inner">
              <ul class="collapse in">
                    <li><a href="pdfs/hawkchildsafe.pdf" target="_blank">Hawk Child Safe</a><br />
                        Wrote Hawk Child Safe site content for <a href="http://www.webworldonline.net" target="_blank">Web World Online</a> - 2009.</li>
                    <li><a href="pdfs/aidstest.pdf" target="_blank">AIDS Testing in Under-Developed Countries</a><br />
                        Wrote and edited 30 pages of web content to raise funding for the <a href="http://www.systemsbiology.org/" target="_blank">Institute for Systems Biology</a>, including this page - 2002.</li>
                    <li class="last"><a href="pdfs/prostate.pdf" target="_blank">Prostate Cancer Study</a><br />
                        Wrote summary of medical study for Nexcura's <a href="http://www.cancerfacts.com" target="_blank">CancerFacts.com</a> site - 2003.</li>                 
               </ul>
            </div>
            </div>
            </div>




Static Popovers:

    $(document).ready(function() {  
    $('.refer').popover(thml)

 })

  div class="refer">
          <div class="popover top">
            <div class="arrow"></div>
            <h3 class="popover-title"></h3>
            <div class="popover-content">
              <p></p>
            </div>
          </div>

Paulie_D

We'd need to see a live site. Do you have a link?

AndyHowells

Have you wrapped that JS in <script> </script> tags?

DesignLady94

ooops....sorry guys: debbierking.com/bootstrap. The accordion is for the page writing.php. The popovers are for refer.php.

Andy, yes....I am using the script tags.

JoshBlackwood

You're missing a closing bracket/paren pair in the accordion toggle script, for one. Should be this:

$(document).ready(function() {
  $('a.accordion-toggle').collapse({
      toggle: false
    });
});

Also, as this disables toggling, I suspect that what you really want is more like this:

$(document).ready(function() {
  $('a.accordion-toggle').collapse();
});

DesignLady94

hmmm...still not working. I'm trying to make sense of what they offer on this page for accordions and popovers:

http://twitter.github.com/bootstrap/javascript.html#collapse

http://twitter.github.com/bootstrap/javascript.html#popovers

DesignLady94

I set up a jsfiddle for the accordion but that doesn't seem to be working...am new to jsfiddle/codepen so I'm not sure if I set it up correctly.

http://jsfiddle.net/DesignLady94/rbH9M/2/

JoshBlackwood

Looks like the href on the a.accordion-toggle link needs to match up with the id on div.accordion-body. So, for your first section, you'd want:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#webContent">

Does that make sense? Also, I see this class .collapse on content within .accordion-inner. If this is in your source code, you need to remove it for the content to show when the accordion is expanded, I believe.

DesignLady94

Thank you Josh...that did it for the accordion! Can't believe I missed the href incongruity.

Now on to the popover...this is what I'm using (from twitter.github.com/bootstrap/javascript.html#popovers):

  $(document).ready(function() {
      $('.refer').popover(html)
  });

HTML:

  <div class="refer">
      <div class="popover top">
          <div class="arrow"></div>

          <h3 class="popover-title">Title</h3>
          <div class="popover-content">
            <p>blah blah blah blah blah blah blah</p>
          </div>

  </div>

Am not sure which options I should be using.

treehouse : what would you like to learn today?

Forums

Bootstrap JS not working