Skip to main content
T
tim cross
Inspiring
February 7, 2019
Answered

dreamweaver jQuery UI Tab Issue

  • February 7, 2019
  • 2 replies
  • 913 views

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>

<meta charset="UTF-8">

<title>Untitled Document</title>

<link href="css/header-general.css" rel="stylesheet" type="text/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.accordion.min.css" rel="stylesheet" type="text/css">

<script src="jQueryAssets/jquery-1.11.1.min.js"></script>

<script src="jQueryAssets/jquery.ui-1.10.4.accordion.min.js"></script>

</head>

<div id="Accordion1">

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

</div>

<script type="text/javascript">

$(function() {

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

});

</script>

</body>

</html>

--------

-------

Hope you can help

Thanks

Tim

This topic has been closed for replies.
Correct answer Nancy OShea

Try this:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

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

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

</head>

<body>

<div id="accordion">

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

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

</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

  $( function() {

    $( "#accordion" ).accordion({

      heightStyle: "content"

    });

  } );

  </script>

</body>

</html>

2 replies

T
tim crossAuthor
Inspiring
February 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

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 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.

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
February 7, 2019

Try this:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

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

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

</head>

<body>

<div id="accordion">

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

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

</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

  $( function() {

    $( "#accordion" ).accordion({

      heightStyle: "content"

    });

  } );

  </script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
T
tim crossAuthor
Inspiring
February 8, 2019

Thank You, Nancy that works much better

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices