Highlighted

DW 2017 CC jquery Accordion widget issue

Community Beginner ,
Jan 30, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

932

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

DW 2017 CC jquery Accordion widget issue

Community Beginner ,
Jan 30, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

933

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 30, 2018 0
Adobe Community Professional ,
Jan 30, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 1
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

#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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 2
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Community Beginner ,
Jan 31, 2018

Copy link to clipboard

Copied

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:

<script>

     $(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...

code check.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion</title>

<!--jQuery UI Theme, pepper-grinder-->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<!--latest jQuery core with integrity check-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--latest jQuery UI with integrity check-->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script>

//jQuery UI custom settings

$(function(){

    $("#accordion").accordion({

        collapsible: true,

        active: true,

        heightStyle: 'content'

        });

  });

  </script>

</head>

<body>

<div id="accordion">

<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>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

</div>

<!--/accordion--></div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2018 2
Community Beginner ,
Feb 01, 2018

Copy link to clipboard

Copied

All good thank you...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2018 0