Solved

Bootstrap Accordian

Posted on 2016-08-15
9
117 Views
Last Modified: 2016-08-16
I have included a bootstrap Accordion in my site.  When I view in Dreamweaver CC 2015, I can see the Accordion. When I review the HTML code, I cannot see the Accordion at all.  Am I missing something? Is the Accordion created somewhere else and referenced on my page?  I do not see a reference to any other page either.  I searched for the text and the HTML for the accordion using search entire site.  Cannot find it anywhere.  I have included a screen shot of the Accordion in my page LIVE.  But again when I switch to code.  I do not see it anywhere.

If I use a jquery accordion, it shows up in the code but it will not allow me to put it in a separate cell.  For instance.  In a left column, I have some Tex and picturest.  In the right column, I want the accordion.  When I put the accordion in the right column the links for the accordion cross the whole div (left and right), but the text does sit in the right Column.  So basically I need the accordion links to open each corresponding text area to be in the same column(all right column), not the left.
2016-08-15_17-48-06.png
0
Comment
Question by:Christopher Gore
  • 5
  • 4
9 Comments
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41757160
Did you include the requirements (JS and CSS) for Bootstrap Accordion?

If that's not the problem, could you please post a small code segment showing us your accordion.

Also, it's not very clear by what you mean regarding left and right columns.  There are no columns in your screenshot.  Seeing the code segment would help in this regard, too.
0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41757172
This is with the jquery Accordion.  (JS and CSS).
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css" />
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css" />
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css" />
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

Open in new window


HTML
  <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
			  </div>

Open in new window


In Dreamweaver using Insert>Bootstrap Components>Accordion does not show any code in the code view.  I actually can't even get it to show up in Live view anymore for Bootstrap accordion.
--- Question 2
I just meant for the column that I have a Div Table <div><div>Left Column<div><div>Accordian</div</div>

Just the Accordion links stretch over the "Left" and "Accordian" columns.  The text inside the Accordian does show in just the "Accordian" row.  I want the links (Titles) for each Accordian row to sit inside the "Accordian" column as well as it's corresponding text.
0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41757183
Here is a better image explanation of what is happening.
0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41757201
I'm using flexi layouts 3 (by extendstudio.com) as well has hand coding.  It's been ok for fexi but when I want do something specific, it does not play nice.  I can work with the jquery accordion instead of the bootstrap accordion but I still have the issue with the links crossing both column.  I think I'm going to stick to hand coding.  If you can give some insight into why the links for the jquery accordion are stretching across both column, that would be helpful.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Accepted Solution

by:
zephyr_hex earned 500 total points
ID: 41757312
I don't see an image attached to your post, but I'm assuming the problem you're facing is represented in this Fiddle Demo.

If that's the case, just set a width on the div with the accordion, like this Fiddle Demo shows.

The key is to set the width with relation to the size of your table.  It could be a percentage (like 70%), or specific width (like 400px).

side by side
HTML
<div>

  <div id="table">
    <table>
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
        a velit eu ante scelerisque vulputate.
      </p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
      </p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
        nisi, eu iaculis leo purus venenatis dui.
      </p>
      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3>Section 4</h3>
    <div>
      <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
      </p>
      <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      </p>
    </div>
  </div>
</div>

Open in new window


JQuery

$("#accordion").accordion();

Open in new window


CSS

#table {
  float: left;
}

#accordion {
  float: right;
  width: 70%; //or set a static pixel, like 400px;
}

Open in new window

0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41758086
Getting same result.  Content is where it is supposed to be, Section header is stretching across both columns.
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41758266
It's impossible for me to guess what the problem might be.  I've demonstrated how it should work with a simple example using the code you've provided so far.

My recommendation would be for you to troubleshoot the CSS using your browser's dev tool (F12).  
F12
From there, you can verify the width on the div is set, and dynamically change it.  Like I mentioned before, the width you use depends on the width of your table.  You also need to make sure your table and accordion divs are inside a parent div, like in my demo.

If you still can't find your problem, we need to see the result of the CSS inspection.  It would also be helpful to see the basic structure of the HTML (which is showing in the screenshot I just posted, in the bottom left frame, where the arrow points to step 2).  If you provided a screenshot similar to the one I just gave you, that should at least tell me what you have going on.  Right now, I'm basically flying blind.
0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41758326
I'm not sure what I was doing wrong when trying to add the accordion to a column.  I think it was the width issue.  Anyway, I used your code exactly then copied over my content and it works.  Thanks,
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41758343
Glad you were able to figure it out.  I do recommend that you take some time to become familiar with the F12 developer tools.  They are very valuable debugging tools.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now