JQuery accordion

Web page with jquery accordion not collapsed

I inserted an Accordion widget JQuery with a sign. But at the opening of the page web, the Panel is always open. Want the Panel to be reduced until the user clicks on the control panel to open. I have the folding option selected in the properties panel.

See jQuery UI Documentation

https://jQueryUI.com/accordion/#collapsible

"By default, accordion always keep an open section.

Set it to allow all layers be foldable, collapsible true option. »

API documentation:

What Panel is currently open.

Several types of support:

• Boolean: setting active to false will collapse all the panels. This requires the collapsible option to be true .
• Integer: the zero-based index of the Panel which is active (open). A negative value selects panels backwards from the last Panel.

Nancy O.

Problems with hosting jQuery accordion developed in Dreamweaver

I'm having a problem and exhausting much too much time trying to fix it... so I hope that someone in the forums can help me.

I'm fairly new to Dreamweaver.  I recently created a website and inserted from the Toolbox jQueryUI accordion into Dreamweaver.

When I preview the accordion in Chrome, FF and IE, it works perfectly.  When I download files to my direct hosting account it seems as if the

There is no such thing as accordion and display titles and paragraphs.

I've never had a problem of something to display so radically different from the IDE for the direct hosting account.

Has anyone else had an issue similar to this?

You have a few calls for separate jquery, 1.8.3.min.js to line 16 libraries and 1.8.2/jquery.min.js on line 80.

Which will usually hit to some or all jQuery running on a page. Try to comment on one or the other and see if that helps...

How can I make a reduced default jQuery Accordion Panel tab?

I googled this and saw that someone recommended to place the 'folding' option to 'active '. For example,.

$( ".accordion" ).accordion("option", {
    collapsible: true,
    active: false
});

I am completely new to Dreamweaver. I inserted a jQuery UI Accordion in my web page because I need a drop-down list. I have a main .css file for my page. Additional css jquery files have been added after I inserted the accordion. (For example, I see jquery.ui.core.min.css, jquery.ui.theme.min.css, jquery.ui.caccordion.min.css, 1.8.3.min.js - jquery, jquery-ui - 1.9.2.accordion.custom.min.js).

I see a section in jquery-ui - 1.9.2.accordion.custom.min.js where I think I might be able to change these settings, but I want to just make sure.

Options: {active: 0, animate: {}, foldable:! 1, event: "click"}

Thanks in advance for your suggestions.

Thanks, sinious! This was very helpful. In the file jquery-ui - 1.9.2.accordion.custom.min.js, I changed the following line from

{version: "1.9.2", options: {active: 0, animate: {}, foldable:! 1, event: "click" ', header: ">}}

TO

{version: "1.9.2", options: {collapsible: true, active: false, animate: {}, event: "click" ', header: ">}}

He worked in preview mode! Thank you, again.

Thumbnail slideshow jQuery accordion begins with the first image, regadless of relaxation

I created my lightbox on a separate page and it works fine.  I placed this lightbox even inside an accordion panel.  Now (only on the first click), it doesn't matter what thumbnail I click on, the first image appears.  If I close this image and click on a thumbnail, the image on the right is in place.  I need to get rid of this problem.  Any suggestions?

You're my hero! I'll give it a try. And thanks for the video for reference as well.

Accordion JQuery collapse setting code on the open page help

Hello, I added a JQuery accordion to one of my pages (.) (PHP), which works well enough, but its been something, although not a major concern, is however annoys the hell out of me!

I added code so that the panels are all initially collapsed, so that other code to crop the box content only (instead of leaving tons of white space at the end), which works but annoyingly, when you 1st click on the page, the 1st Panel is still open for a few seconds before it stops.

Is there anything I can change my code so that it does not? I tried different ways shown on stack overflow, but none seem to work with the code "of cultures to the content" (He knocks it out for some reason any)

My Web page with the accordion on is here: http://www.reese-test2.co.uk/tcs.php

The accordion code is here:

<span class="mainareaP">
<script src="jQuery/external/jquery/jquery.js"></script>
<script src="jQuery/jquery-ui.js"></script>
<script>


  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });


$("#accordion").accordion({ 


heightStyle: "content" 


});


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


// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
  function() {
  $( this ).addClass( "ui-state-hover" );
  },
  function() {
  $( this ).removeClass( "ui-state-hover" );
  }
);
</script>

Thank you

Sara

Let's not your code of accordion. Just change:

$(function () {})

$("#accordion").accordion ({collapsible: true, active: false});
$(".selector").accordion ();
});

$("#accordion").accordion ({}

heightStyle: "content".

});

. accordion() $(«#accordion»);

TO:

{$(function()}

$(«#accordion»).accordion({)

collapsible: true, active: false,heightStyle: "content"

});

});

First tab opening accordion jquery loading page

Hello, I wonder how I'd the first tab of my accordion to open when the page loads. It's a custom accordion and it is difficult to find the answer online.

I want it to be specific to a certain page if possible rather than universal through the site.

Here's the HTML code:

< div id = "st-accordion" class = "st-accordion" >

< ul >

< li >

< a href = "#" > Lorem ipsum < span class = "st arrow" > open or close </span > < /a >

< div class = "st-content" >

< p > Lorem ipsum dolor sit amet, adipiscing elit computer. Amongst computer auctor ante, sodales pretium felis auctor in. Aenean tempor orci vel vestibule lobortis, justo augue, laoreet turpis, id 195kgs dolor sed arcu arcu. SED id dolor tellus. Nulla sollicitudin, risus eros in ac and tincidunt nisl ultricies. Nam 195kgs departing Morbi pretium libero in ultricies lacus semper ac. Vestibule in a malesuada vel lorem ac posuere ligula nibh. DUIs varius city vehicula. Maecenas convallis tellus in tellus eget EST lacinia sollicitudin facilisis. UT tortor, pretium lacinia non sit amet, sold ac ipsum quam. Donec quis felis fringilla leo eget pulvinar accumsan libero. < /p >

< / div >

< /li >

< li >

< a href = "#" > Lorem ipsum < span class = "st arrow" > open or close </span > < /a >

< div class = "st-content" >

< p > Lorem ipsum dolor sit amet, adipiscing elit computer. Amongst computer auctor ante, sodales pretium felis auctor in. Aenean tempor orci vel vestibule lobortis, justo augue, laoreet turpis, id 195kgs dolor sed arcu arcu. SED id dolor tellus. Nulla sollicitudin, risus eros in ac and tincidunt nisl ultricies. Nam 195kgs departing Morbi pretium libero in ultricies lacus semper ac. Vestibule in a malesuada vel lorem ac posuere ligula nibh. DUIs varius city vehicula. Maecenas convallis tellus in tellus eget EST lacinia sollicitudin facilisis. UT tortor, pretium lacinia non sit amet, sold ac ipsum quam. Donec quis libero accumsan felis fringilla pulvinar eget in leo < /p >

< / div >

< /li >

< /ul >

< / div >

< / div >

< / div >

" < script type =" text/javascript"src =" http://AJAX.googleapis.com/AJAX/libs/jQuery/1.6.4/jQuery.min.js "> < / script > .

< script type = "text/javascript" >

{$(function()}

$('#st-accordion').accordion ({}

oneOpenedItem: true

});

});

< /script >

"< script type =" text/javascript"src="js/jquery.easing.1.3.js "> < / script >

"< script type =" text/javascript"src="js/jquery.accordion.js "> < / script >

< / div >

And the CSS:

.st-accordion{

    width:100%;
    min-width:270px;
    margin: 0 auto;






}.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}


.st-accordion ul li:first-child{
    border-top:none;
}


.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 22px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}


.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}


.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
}


.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px; 
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}


@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:14px;
    }
}


@media screen and (max-width: 800px){
    .st-accordion ul li > a{
        font-size:16px;
    }
}











You can find the page at http://bit.ly/Zrpt1s

Any help is appreciated thank you grately!

Try

{$(function()}

$('#st-accordion').accordion ({}

oneOpenedItem: true

Open: 0

});

});

auto collapse a mobile menu accordion when you click on links to anchors on the same page

I'm building a mobile site, with the Accordion widget containing the a menu widget, pinned to the top (I added css custom to pin it on top).

It's a single page site, so all the links are to anchors in the same page.

How can I make the accordion close when you click on the links in the menu?

You can try the suggestion mentioned here:

http://StackOverflow.com/questions/21649839/make-accordion-close-on-second-click-jQuery

http://StackOverflow.com/questions/9260068/collapse-jQuery-accordion-on-click

Thank you

Sanjit

Size of accordion

Hello

Here I used the plugin Accordion for my website

http://BHC.edu.in/MaTICS/qualifications.php

from the site rdion.html http://www.jqueryscript.net/accordion/Simple-Responsive-jQuery-Accordion-Plugin-SMK%20Acco

I want to reduce the width of the plug-in. How can I? Help, please

Roopavathy wrote:

Hello

Here I used the plugin Accordion for my website

http://BHC.edu.in/MaTICS/qualifications.php

from the site rdion.html http://www.jqueryscript.net/accordion/Simple-Responsive-jQuery-Accordion-Plugin-SMK%20Acco

I want to reduce the width of the plug-in. How can I? Help, please

It seems to me that it is set to 100% wide to account for all the Office devices, Tablet and smartphone.

If you want to set a specific width say to desktop then you define in a media css for desktop application.

Example:

@media screen and (min-width: 980px) {}

{.accordion-demo

Width: 400 PX;

}

}

Templates

Hello

I'm looking for a Dreamweaver template which has the following requirements, yet there are so I can't see the forest trees to find the good, so hoping someone can know and point me in the right direction?

Basic requirements;

Fixed header with two mega menus, one or the other side that the site title and logo will be central.

jQuery Accordion with the option drag the accordion selected to the top of the screen when selected.

Entirely sensible and compatible browser.

under the main header image that as wide as the screen, obviously limited to a max screen size. However, I would like to extend above the image as text the book of visitors upward.

Other options;

I know WordPress plugins for practically everything under the Sun, but what are the Dreamweaver?

I seek one for PayPal and accessibility while discovering others?

I know who can ask for much, but my skills are limited and it's just a hobby. I tried WordPress and found it very frustrating to work with because I was using for the visualization of code and live at the same time.

Kind regards

Lee

my skills are limited and it's only a hobby.

If you have a budget to work with, look at the project seven CSS Templates or layout Builder Magic.

Responsive CSS Layout Builder for Dreamweaver

Nancy O.

I have the head on a fixed site so that the rest of the site is not make a video player?

This will seem like a crazy question... I am designing a Web site that there is a video player, and then click as the video player of other things. I want it is the video player attached to the head so that it plays continuously while they click on things below that provide new information. Say, they click on a button below, which will provide information on the best places to visit in New-Mexico, information which was not there before, generated under it and the video player plays without skipping a beat. Is this something which, as exist?

Thank you.

Of course, you can-

Put your video in a fixed container up and place a JQuery "Accordion" below.

customize the menus vertical spry this submenu moves the top menu down

Hello

I would like to customize a menu bar vertical spray as submenus down top menu if they appear.

Maybe that's the kind of effect you're looking for?

http://perishablepress.com/jQuery-accordion-menu-tutorial/

The foregoing is jQuery not Spry - what is now obsolete and not supported by Adobe longer.