[locked] Accordion help

Report · Nov 20, 2018

I'm trying to use a collapsible accordion for a webpage I maintain for an athletics program that I coach. However, I don't have a lot of experience with CSS or bootstrap. I can't seem to get the accordion to collapse, instead only getting what seems to equate to a basic table. Please help!

Report · Nov 20, 2018

Scratch that - I found the errors in my html...However, I am still wondering if there is a way to make the initial tab collapse by default?

Report · Nov 20, 2018

The best way to get help is to get a test page online and post a link so people can see your code. As for using Bootstrap, it is not Adobe code, it is merely a CSS/script library that Adobe has included in Dreamweaver in lieu of writing their own solutions. Bootstrap is not the best solution in the minds of many accomplished web programmers, and your other option is to use a Dreamweaver extension which can automate these kinds of tasks for you, with cleaner, more efficient code. Here is an example of our Accordion widget:

Accordion Panel Magic Examples

It's not free, but if you contact us directly, we will give you a copy to play with.

And... To have all panels collapsed or a multitude of other options, you simply check a box in the user interface.

Report · Nov 21, 2018

richchiamulera wrote
I am still wondering if there is a way to make the initial tab collapse by default?

You sure can, with collapse hide class.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4.1.3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<div id="accordion">
<div class="card">
<div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </div>
<div id="collapseOne" class="collapse hide" data-parent="#accordion">
<div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
</div>
<div class="card">
<div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Collapsible Group Item #2 </a> </div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
</div>
<div class="card">
<div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Collapsible Group Item #3 </a> </div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 23, 2018

Here is my code for my first tab of the accordion. Where would I put in the collapse hide code?

<h3><a href="#">Total Points</a></h3>

<div>

<p>

<strong>700 Point Club</strong><br>

1. Amanda Anderson - 712 points (2007-2008)<br>

<strong>500 Point Club</strong><br>

2. Amanda Anderson - 597 points (2008-2009)<br>

3. Kelsey Lang - 584 points (2012-2013)<br>

4. Anna Strickland - 560 points (2011-2012)<br>

5. Nicole Iademarco - 535 points (2013-2014)<br>

6. Emma Warnsman - 504 points (2017-2018)<br>

7. Kelsey Lang - 501 points (2011-2012)<br>

<strong>400 Point Club</strong><br>

8. Mia Ajekwu - 492 points (2002-2003)<br>

9. Megan Valicevic - 470 points (2004-2005)<br>

10. Brittney Reed - 466 points (2003-2004)<br>

11. Nicole Iademarco - 447 points (2012-2013)<br>

12. Heather Anderson - 427 points (2005-2006)<br>

<strong>300 Point Club</strong><br>

13. Amanda Anderson - 394 points (2006-2007)<br>

14. Payton Walker - 386 points (2014-2015)<br>

15. Anna Strickland - 365 points (2009-2010)<br>

16. Anna Strickland - 360 points (2010-2011)<br>

17. Emma Warnsman - 354 points (2016-2017)<br>

18. Brittney Reed - 351 points (2004-2005)<br>

19. Megan (McDougald) Storms - 344 points (2001-2002)<br>

20. Payton Walker - 342 points (2015-2016)<br>

21. Courtney Clark - 341 points (2002-2003)<br>

22. Paige Bradley - 335 points (2010-2011)<br>

23. Brittany Caporale - 319 points (2007-2008)<br>

24. Casey Walker - 313 points (2001-2002)<br>

25. Melissa Richardson - 312 points (2004-2005)<br>

26. Sarah Seefeldt - 310 points (2010-2011)<br>

27. Madison Morton - 307 points (2017-2018)<br>

28. Sarah Seefeldt - 303 points (2007-2008)<br>

</p>

</div>

Report · Nov 23, 2018

Which version of Bootstrap are you using?

My working example uses Bootstrap 4.1.3 (the latest version).

Try copying and pasting my code into a new, blank document and try it.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 23, 2018

How does that answer my question? I am just asking which div code should I add that collapse tag that you gave me? Or if I need to create a new one.

Report · Nov 23, 2018

You didn't answer my question about versions. Panels were dropped from Bootstrap 4. We now use Cards instead of Panels for Accordions.

<div class="card">

<div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </div>

<div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 23, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
You didn't answer my question about versions. Panels were dropped from Bootstrap 4. We now use Cards instead of Panels for Accordions.

I don't know how in good conscience you can continue to promote Bootstrap. This post, more than any other demonstrates clearly why Dreamweaver and Bootstrap is a marriage made in hell. Dreamweaver should prompt to update markup when required... we certainly do with our extensions.

Hopefully you can help fix this guy's problem when he reports back with the version of Bootstrap he is using, but cripes, this is a really, really bad way for Dreamweaver to be working.

Report · Nov 23, 2018

AT the bottom of the page, try changing:

<script type="text/javascript">
$(function() {
$( "#Accordion1" ).accordion();
});
</script>

to

<script>

$(function(){

$("#Accordion1").accordion({

collapsible: true

});

</script>

Paul-M - Community Expert

Report · Nov 24, 2018

Dreamweaver assumes people know coding basics and which framework and/or plugin versions they're using for particular tasks. The OP implied in post #1 that they were using CSS & Bootstrap. How was I supposed to know they were also using every jQuery plugin in the yellow pages without a link? No link = all guesswork.

See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 24, 2018

With absolutely all due respect Ms. OShea, I do not appreciate the disrespect shown in this post. First off, this is a HELP FORUM, correct? So I am not wrong in asking for assistance in trying to better understand the coding used. Second off, it should go without saying, but I'll say it: Dreamweaver cannot assume anything. The one making assumptions was YOU. The program makes zero assumptions, especially about an individual's coding knowledge. Third, I did not imply anything in my original post. I stated that I had very little knowledge in CSS & Bootstrap. I did not allude to those being where the errors lay, instead pointing out my knowledge base. From there (as the professional), if you were to provide assistance, you should have been able to infer where my knowledge base was. I also specifically asked about one jQuery plugin as that was specific to using the accordion implementation that I originally posted my request about.

As an ACP affiliate and bearing that title, I should think that you would be more of a help and less disrespectful. If the issue was that I did not provide a link, perhaps you should have asked for one at some point? Since that would "eliminate guess work". And not fire at me after someone else helped.

I thank you for attempting to help me in the ways that you saw fit. I am sorry that I did not have the right level of knowledge to be able to provide you with a better opportunity to help me with my request.

Nancy OShea

Report · Nov 24, 2018

richchiamulera a écrit
With absolutely all due respect Ms. OShea, I do not appreciate the disrespect shown in this post. First off, this is a HELP FORUM, correct? So I am not wrong in asking for assistance in trying to better understand the coding used.

Well, it's not a help forum in the sense that it's an Adobian hotline. nope, It's a forum where various enthusiasts will come and try to help each other....

no one is present there as an offical helper who must at all costs help and answer every post....

all of us work in an activity related to web application development, and take on our own time to try to answer when we can to questions that could embarrass some people...

so sorry if you felt unwelcome but knowing Nancy (from her various post), I don't find that she was disrespectful and her answers seemed to me to be quite relevant and adapted to the context.

sorry again

Report · Nov 24, 2018

Sorry you took offense but my remarks won't aimed at you. I replied to Al Sparber.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 24, 2018

While that may be true and what I anticipated to be the answer, I hope you can see that while aimed at another person, they were about me.

Report · Nov 24, 2018

With absolutely all due respect Ms. OShea, I do not appreciate the disrespect shown in this post.

Nancy's ire is directed at me. But your points are quite astute as far as Dreamweaver goes. Adobe, and some of the ACPs seem to have problems understanding just who the typical Dreamweaver user is. Your reactions are spot-on with my feelings on the matter. You shouldn't have to go through hoops to get help... but here's what's happening:

Dreamweaver is a code editor, a content editor, and a site manager. In those aspects it is a really, really good program. The problems began when Adobe decided to mix in page layout and client-side widgets by adding jquery widget support and, later, Bootstrap support, along with primitive one-way UIs with which to deploy them. jQuery and Bootstrap are free. Both have their fans and their detractors (Bootstrap is perceived negatively by far more top-level coders than jQuery). Since Bootstrap and jQuery are free, open source libraries, there is no accountable support. Instead there are documentation and various forums. Adobe faced a conundrum. They do not employ coding experts that can provide actual support, so the extent of what you get in terms of support for your monthly subscription, is a link to this forum. This forum, however, is not an official support medium for Adobe. It is staffed solely by volunteers, some of whom not even active Dreamweaver users.

So, here you are.

And here I am. As one of the three original Dreamweaver evangelists, appointed by Dreamweaver's original owner, Macromedia, back in 1998, I have accepted an ACP label. But I have an agenda. I am trying to educate as many users as I can, that Dreamweaver became the success it used to be, through the efforts of the extension community. And it started to fail when Adobe decided to eschew extensions (some of which were free) in favor of open source code that it was not even prepared to support. I am trying to rejuvenate the community. I am trying to change Dreamweaver.

Sadly, some of the ACPs are wedded, for good or for bad, with Bootstrap. And they sometimes see me as an enemy.

But I'm not.

So, since I feel bad when these posts degrade into tangents and posturing, please feel free to contact me directly. If you hover over my name, you will be able to see my web site domain. From there, you can find email addresses and phone numbers. Feel free to mail me or call me and I'll be happy to give you the best web design help I can.

And sorry for the noise.

Report · Nov 23, 2018

And how would I know what version of Bootstrap I'm using?

At this point, I'm ok with just leaving the default first tab open. It's not worth all of this.

Report · Nov 23, 2018

Look at the top of you bootstrap css and/or js files

Paul-M - Community Expert

Report · Nov 23, 2018

Interestingly enough, when I go to try and open bootstrap.js or bootstrap.css, I'm not able to open either document. They are "not on the local disk" and also "doesn't exist on the remote site". So not really sure how to provide that information...

All I can say is that I currently am using Adobe Dreamweaver CC v. 19.0 (11193 Build). In Dreamweaver, I just went to Insert -> jQuery UI -> Accordion.

Report · Nov 23, 2018

richchiamulera wrote
Interestingly enough, when I go to try and open bootstrap.js or bootstrap.css, I'm not able to open either document. They are "not on the local disk" and also "doesn't exist on the remote site". So not really sure how to provide that information...

Bootstrap files cannot be opened. Look at the link to the Bootstrap CSS file in the head of your page (Code View). The version number should be listed there... Like this:

Report · Nov 23, 2018

Thank you for that guidance. Here is what the head of my page shows:

I don't see a version number for Bootstrap...

Report · Nov 23, 2018

There's a number of reasons for that. At this point, based on what you are reporting, the only way you are going to get meaningful help is if you post a link to the actual page.

Report · Nov 23, 2018

Two different pages:

Season Records

Career Records **And if anyone can help me with why the "Collegiate Players" column isn't appearing on the right hand side like it's supposed to, that would be awesome!**

Report · Nov 23, 2018

You are using a jQuery accordion, not a Bootstrap accordion. The options in the accordion script file have to be set to

collapsible: true,

Since many of the ACPs in this forum use open source free code (Bootstrap and jQuery, e.g.) I'm surprised your markup in one of your earlier posts did not clear things up. I write my own widgets for Dreamweaver, so it was not readily apparent until I actually saw all of your code.

Sorry.

Given your lack of coding skills, though, you might want to seriously consider using extensions in the future. That way you get something with an actual interface, along with a developer that is honor-bound to provide one-on-one support... in a timely manner.

Report · Nov 23, 2018

ALsp How would I make that change?

Adobe Community

[locked] Accordion help

1 Correct answer