DW 2017 CC jquery Accordion widget issue

Report · Jan 30, 2018

I am taking a class on Dreamweaver and am VERY novice in the application. My assignment is to use the Accordion widget and insert different sections of my resume into the sections of the widget. This was all pretty easy, to be honest. The problem I am having is two-fold. The length of the accordion content sections seems to default to the length of the first section. Since the first section contains my work experience it is pretty long. The second section is probably 30 lines and the third section of content is also about 30 lines. They all appear to function as expected with the glaring issue of the length of sections 2 and 3 that have a HUGE blank area after the text. What I am not able to figure out after several hours of playing, googling and reading is this... How do I change the length of the sections to fit the length of the content? the second issue is even though the footer is below the script and was fine at the bottom of the page it is now appearing in the accordion and I cant get the footer to stat at the bottom of the page. It isn't in the accordion at all so I am a bit confused. I could post the code but I thought that a link was best.

http://bobby.wildomarit.com/resume.html

Report · Jan 30, 2018

Let's start with the code errors that need attention.

Showing results for http://bobby.wildomarit.com/resume.html - Nu Html Checker

Once those are taken care of, you can review the jQuery UI docs on how to size panels to content.

https://jqueryui.com/accordion/#no-auto-height

Post back if you have any problems.

Nancy

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

Report · Jan 31, 2018

That really helped me out. I do suddenly have a strange 4 section on the accordion all of a sudden and I do not see where it is coming from. ??? Also is there a way to change the "state of the accordion to be closed when the page loads? So the user could select the section without having to scroll?

Report · Jan 31, 2018

#1 When things don't work as expected, it's because of code errors. Check your code again.

#2 Read the jQuery UI docs for details on how to make it function as desired.

Nancy

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

Report · Jan 31, 2018

I just realized, the Accordion Collapse doc doesn't tell you to set the Active property to false which will close all panels on page load.

<script>

$( function() {

$( "#accordion" ).accordion({

active: false;

collapsible: true;

heightStyle: "content"

});

} );

</script>

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

Report · Jan 31, 2018

Thank you, Nancy, You are a gem and I will start checking my code for errors.

Report · Jan 31, 2018

I am sure you are ready to tell this newbie to go read at this point. I will tell you before I message I really do research the issues.

So I replaced the code that you wrote on my page... It breaks the accordion altogether.

Your Code:

<script>

$( function() {

$( "#accordion" ).accordion({

active: false;

collapsible: true;

heightStyle: "content"

});

} );

</script>

My code:

$(function() {

$( "#Accordion1" ).accordion({

heightStyle: "content"});

});

</script>

I didn't want to clutter the post with the entire page source so I am just sending the URL of http://bobby.wildomarit.com/resume

If you notice there are now 4 section to the accordion rather than 3... Not sure why it has appeared tbh...

BTW there are no reported errors on that page now. I cleaned them up last night. there is a warning that is confusing me...

Report · Jan 31, 2018

In HTML5 you don't need to express the type (text/javascript or text/css).

Just so you know, there are several jQuery UI Themes you can use.

JQUERY UI THEMES:

base (default)

black-tie

blitzer

cupertino

dark-hive

dot-luv

eggplant

excite-bike

flick

hot-sneaks

humanity

le-frog

mint-choc

overcast

pepper-grinder

redmond

smoothness

south-street

start

sunny

swanky-purse

trontastic

ui-darkness

ui-lightness

vader

This is working for me in all browsers.

<!doctype html>

<head>

<title>jQuery UI Accordion</title>

//jQuery UI custom settings

$(function(){

$("#accordion").accordion({

collapsible: true,

active: true,

heightStyle: 'content'

});

</script>

</head>

<body>

<h3><a href="#">Section 1</a></h3>

<div>

<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<h3><a href="#">Section 2</a></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><a href="#">Section 3</a></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>

</ul>

</div>

</div>

</body>

</html>

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

Report · Feb 01, 2018

All good thank you...

Adobe Community

DW 2017 CC jquery Accordion widget issue

1 Correct answer