dreamweaver jQuery UI Tab Issue

Report · Feb 07, 2019

I am using Dreamweaver and the jQuery UI Tab which I selected within Dreamweaver

The problem I am having is The first tab has more text than the other tabs underneath it. But for some reason I can't make the other tab heights different from the first one tab. Is there away to solve this issue?

-----

I have not attached the jQuery plugin which are auto loaded from dreamweaver

----

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

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

<div>

<p>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. Lorem ipsum dolor sit amet, consectetur aliquip ex ea commodo.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. for more details please click here...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. Lorem ipsum dolor sit amet, consectetur aliquip ex ea commodo.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. for more details please click here...<br>

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. Lorem ipsum dolor sit amet, consectetur aliquip ex ea commodo.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. for more details please click here...<br>

</p>

</div>

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

<div>

<p>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. Lorem ipsum dolor sit amet, consectetur aliquip ex ea commodo.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. for more details please click here...</p>

</div>

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

<div>

<p>Content 3</p>

</div>

$(function() {

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

});

</script>

</body>

</html>

--------

-------

Hope you can help

Thanks

Tim

Report · Feb 07, 2019

Try this:

<!doctype html>

<head>

<title>jQuery UI Accordion - No auto height</title>

</head>

<body>

<h3>Section 1</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>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>

</ul>

</div>

$( function() {

$( "#accordion" ).accordion({

heightStyle: "content"

});

} );

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 08, 2019

Thank You, Nancy that works much better

Report · Feb 14, 2019

Does anyone know how to find the javascript files for versions

1.12.1.js

1.12.4.js

"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

"https://code.jquery.com/jquery-1.12.4.js

https://code.jquery.com/ui/1.12.1/jquery-ui.js

please???

as I want to alter some of the styles which are locked if I link to there website using https://code.jquery.com/jquery-1.12.4.js

Many thanks

Tim

Report · Feb 14, 2019

you could simply download that file from their website, save it locally to your site, and make any edits you like. Then just relink your pages to the local file instead of the hosted one.

If you're talking about css styles, you don't modify the .js files for that, you create an override.css file and link it after all other css files in the <head> of your pages. Then simply use the same selectors, with new properties, in the new .css file and since they come later in the cascade, they would override any hosted external file linked earlier in the page.

Report · Feb 14, 2019

Actually, there are 25 jQuery UI themes you can use.

jQuery UI – All Versions | jQuery CDN

base 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

Nancy O'Shea— Product User, Community Expert & Moderator

Adobe Community

dreamweaver jQuery UI Tab Issue

1 Correct answer