I would like to have a single button that says, "Viewer One" and is tied to a section with the ID, "viewer_one". When the user clicks the button, I would like it to change to show, "Viewer Two" and also show the section with the ID "viewer_two" in place of where the other nav had been. Each time the button is clicked it will switch to the other.
I have two sets of script that perform each function individually, but I cannot figure out how to make them work at same time. At moment, I can either have a button that changes its value on click but does not impact the rest of the code or I can have the button impact the rest of the code but its own text does not change.
I have included my code below - I have included both sets of javascript so that you can see what I have but they only work when I include one or the other - I need help figuring out how to get them to work together.
Below is a condensed version of the code to the pertinent parts - the main code has several more list items for each viewer.
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
if (document.getElementById('viewer_one')) {
if (document.getElementById('viewer_one').style.display == 'none') {
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
}
else {
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
}
}
}
<!--This gets the button text to change-->
function myFunction() {
var x = document.getElementById("Button1");
if (x.innerHTML === "Viewer Two") {
x.innerHTML = "Viewer One";
} else {
x.innerHTML = "Viewer Two";
}
}
<section id="second_nav">
<input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/>
<button id="Button1" onclick="myFunction()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts2"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
No error messages, but I can only get one or the other to work, not in combination.
Thanks in advance for any help.
var currentViewer = 1
updatePage(currentViewer)
function switchViewer() {
if (currentViewer === 1) {
currentViewer = 2
} else if (currentViewer === 2) {
currentViewer = 1
}
updatePage(currentViewer)
}
function updatePage(viewer) {
switch(viewer) {
case 1:
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
document.getElementById('view_area_one').style.display = 'block';
document.getElementById('view_area_two').style.display = 'none';
document.getElementById('switchViewerButton').innerHTML = "Viewer 2"
break;
case 2:
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
document.getElementById('view_area_one').style.display = 'none';
document.getElementById('view_area_two').style.display = 'block';
document.getElementById('switchViewerButton').innerHTML = "Viewer 1"
break;
}
}
<section id="second_nav">
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info (view_area_one)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info (view_area_two)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p>
<span id="scripts2"></span>
<h4>Scripts From V2</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
Here's my version - I separated out the logic for controlling which viewer is currently visible from the code that changes the DOM, so you can more directly see how the current viewer changes the content of the page. I also didn't fully understand what you wanted to change on the button press, I've made it a content toggle as that seemed to be what you were going for? Your example only toggles the navbar. Let me know how this suits you.
So, If you want both to work together, write your javascript code as:
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
<!-- Your Code -->
}
<!--This gets the button text to change-->
function myFunction() {
<!-- Your Code -->
}
<!-- My Code -->
window.onload = function(){
const button = document.querySelector("#switchViewerButton");
if (button) {
button.onclick = function(event){
event.preventDefault();
switchVisible();
myFunction();
}
}
}
And Replace the HTML line
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
with the line
<button id="switchViewerButton">Viewer One</button>
I hope it should work. Please comment if you face any problem in implementing the solution.
I'm having some trouble getting ng-click to hide one set of questions but show another.
The setup is fairly simple. I have two answers to one question with one answer using ng-show="group" and the other ng-show="!group". I have two buttons in the same HTML section using ng-click to set "group = true" and "group = false". However, when I click the first button for the first time, ng-click doesn't activate my scroll-to directive. However, when I click it a second time, it does perform scroll-to.
Here's a snippet of my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section class="container-fluid" id="section1">
<h1>Favorite food?</h1>
<div class="btn-toolbar">
<label class="btn btn-primary" scroll-to="#section2" ng-click="showSection2 = true; group = true; ProductFilterGroup = {group: 'fruits'}" uib-btn-radio>Fruits</label>
<label class="btn btn-primary" scroll-to="#section2" ng-click="showSection2 = true; group = false; ProductFilterGroup = {group: 'vegetables'}" uib-btn-radio>Vegetables</label>
</div>
</section>
Updated code in Plunker. It seems that removing "ngAnimate" from the app.js fixed the problem. Now clicking "fruit" will scroll to "Whats your favorite color of fruit?" and clicking "vegetables" will scroll to "Whats your favorite color of vegetables?".
To show or hide some subtree of DOM elements you may use ng-show directive. Below you can see an example of how it may be done (see section2). Also, I've added scroll-to directive to illustrate how it works together with ng-click. Clicking the button scrolls to second section after showing it.
angular.module('app', [])
.controller('ctrl', [function() {
this.showSection2 = false;
this.group = false;
}])
.directive('scrollTo', ['$location', '$anchorScroll', function($location, $anchorScroll) {
return {
restrict: 'A',
scope: false,
link: function(scope, el, attr) {
el.on('click', function() {
$location.hash(attr.scrollTo.substr(1));
$anchorScroll();
})
}
};
}]);
section {
min-height: 1000px;
}
aside {
position: fixed;
bottom: 0;
right: 0;
font-size: 1rem;
background-color: rgba(255, 128, 128, 0.5);
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl as vm">
<aside>Group: {{vm.group}}</aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget porta neque. Sed maximus molestie ex. Phasellus a blandit ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pellentesque elit a tristique imperdiet.
</p>
<section class="container-fluid" id="section1">
<h1>Favorite food?</h1>
<div class="btn-toolbar">
<label class="btn btn-primary" scroll-to="#section2" ng-click="vm.showSection2 = true; vm.group = true; vm.ProductFilterGroup = {group: 'fruits'}" uib-btn-radio>Fruits</label>
<label class="btn btn-primary" scroll-to="#section2" ng-click="vm.showSection2 = true; vm.group = false; vm.ProductFilterGroup = {group: 'vegetables'}" uib-btn-radio>Vegetables</label>
</div>
</section>
<p>
Nulla purus mauris, mollis a aliquam efficitur, blandit vitae ante. Proin id nisi quam. Sed sit amet fermentum enim. Nunc pretium neque quis vulputate ultrices. Proin porttitor eget ligula ut gravida. Donec ut felis ex. Pellentesque a accumsan tortor.
</p>
<section class="container-fluid" id="section2" ng-show="vm.showSection2">
<h1>Favorite drink?</h1>
<div class="btn-toolbar">
<label class="btn btn-primary" scroll-to="#section1">Cola</label>
<label class="btn btn-primary" scroll-to="#section1">Soda</label>
</div>
</section>
</body>
</html>
I have multiple inputs and a button. When I click the button the active class from first input goes to next input. What I want to do is get the value of previous input with that class after button click.
How to do that?
$('.question').prev('.selected input').val();
<form action="final.php" method="post">
<input name="intr_id" value="0" type="hidden">
<p class="question selected" id="intreb_1">
<input name="intr1" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
<p class="question " id="intreb_2">
<input name="intr2" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
<p class="question " id="intreb_3">
<input name="intr3" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
<p class="question " id="intreb_4">
<input name="intr4" value="" type="hidden">Suspendisse hendrerit, nibh eu fringilla finibus, lacus lectus elementum nunc, sed molestie sapien orci id erat?</p>
<p class="question " id="intreb_5">
<input name="intr5" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
<p class="question " id="intreb_6">
<input name="intr6" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
<p class="question " id="intreb_7">
<input name="intr7" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
<p class="question " id="intreb_8">
<input name="intr8" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
<p class="question " id="intreb_9">
<input name="intr9" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
<p class="question last" id="intreb_10">
<input name="intr10" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
<div class="answer_buttons">
<a class="nu" href="">No</a>
<a class="da" href="">Yes</a>
</div>
</form>
So, if my understanding is correct, you have:
Input 1, wrapped by some container
Input 2 wrapped by some container
After filling Input 1, the Input 2 container gets a "selected" class and, at that point, you want to see what's the value of Input 1?
First, have in mind that this is a bad solution design as a whole, because your business logic gets mixed up (and dependent!) with your presentation.
The cleanest way to do it is to have both containers have some generic class like "input-field-container". That way, after having the 2nd container being also selected, its class will be "input-field-container selected". Then, using jQuery, you'd have:
$(".input-field-container.selected")
.prev(".input-field-container")
.children("input").first().val()
Note that you may have to replace children with find if your actual input is wrapped in intermediate elements between the container and the input.
Translation: Get me the selected container, then get the first container above it, then get its first child input and get its value.
And again, this is a bad approach - values to your inputs should be synchronized with a model that should take care of reading them and it shouldn't be depending on such a logic.
Adding var val = $(".question.selected input[type='hidden']").val() before the code which transfers the class to the next input will get you the value.
First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help.
The problem
I'm working with multiple divs and jQuery ToggleSlide(). I want the script to find the right div to open when I click the corresponding div.
For example, when I click the div 'hackandfly', I want it to open the div 'hackandfly-open'.
The code
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $(this);
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
HTML
<div class="content projects">
<h3>Projects</h3>
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
<img src="images/schiphol-logo.png" class="img-project-open"> Proin nec elit ac sapien facilisis ultrices. Integer pellentesque ex a luctus fringilla. Aenean in quam quam. Integer gravida quam eget mauris laoreet hendrerit. Vestibulum feugiat ipsum id.
<br>
<br>
Metus aliquet iaculis. Proin massa justo, maximus in tortor et, Proin massa justo, maximus in tortor et. In aliquam laoreet magna et iaculis. Vestibulum vel orci lobortis, elementum nulla eget, porta eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br>
<br>
Proin massa justo, maximus in tortor et, tincidunt efficitur nibh. Mauris vulputate euismod lorem, vel rutrum ipsum iaculis eu.
</div>
So what I'm looking for, is that when I push 'hackandfly' div, 'scanergy' div or the 'connecting-food' div, I want it to slideToggle the corresponding div that has -open behind it (I have 3 divs with info called hackandfly-open, scanergy-open, connecting-food-open).
I tried some things like:
$slidah = $(this).after('-open');
And some other stuff but it didn't work. Who can help me?
Cheers!
Use attr() like
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $($(this).attr('class')+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
However, the above will fail if you have multiple classes.
A workaround would be to add data-* to the clicked elements like
<div class="hackandfly other-class" data-class-target="hackandfly-open"></div>
and then
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $('.'+$(this).attr('data-class-target'));
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
I would generate a unique click handler for each class. That way, you can store all the applicable class names in an array:
// Creates a new unique click function for each class name
function generateClickHandler(className) {
return function(e) {
// select the open class here
$slidah = $('.'+className+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
};
}
// Iterate over all the class names and add a new function for each
var clsList = ["hackandfly", "scanergy", "connecting-food"];
$.each(clsList, function(className) {
$("."+className).click(generateClickHandler(className));
});
Use:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $("."+$(this).attr('class')+"-open");
$slidah.slideToggle();
});
If you added a wrapper around each section like so:
<div class="content projects">
<h3>Projects</h3>
<div class="project-wrapper">
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
{...}
</div>
</div>
</div>
you could use parent and find to get the corresponding element as follows:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$(this).parent().find('.project-open').eq(0).slideToggle();
}
I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.
Pretty simple:
<script type="text/javascript">
(function($) {
$(function() {
$("#accordion > div").accordion({ header: "h3", collapsible: true });
})
})(jQuery);
</script>
<div id="accordion">
<div>
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
This was originally discussed in the jQuery UI documentation for Accordion:
NOTE: If you want multiple sections
open at once, don't use an accordion
An accordion doesn't allow more than
one content panel to be open at the
same time, and it takes a lot of
effort to do that. If you are looking
for a widget that allows more than one
content panel to be open, don't use
this. Usually it can be written with a
few lines of jQuery instead, something
like this:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
Or animated:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
"I may be an idiot" - You're not an idiot if you don't read the documentation, but if you're having problems, it usually speeds up finding a solution.
Posted this in a similar thread, but thought it might be relevant here as well.
Achieving this with a single instance of jQuery-UI Accordion
As others have noted, the Accordion widget does not have an API option to do this directly. However, if for some reason you must use the widget (e.g. you're maintaining an existing system), it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget.
For example:
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});
See a jsFiddle demo
Or even simpler?
<div class="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div class="accordion">
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div class="accordion">
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
$(".accordion").accordion({ collapsible: true, active: false });
</script>
I have done a jQuery plugin that has the same look of jQuery UI Accordion and can keep all tabs\sections open
you can find it here
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
works with the same markup
<div id="multiOpenAccordion">
<h3>tab 1</h3>
<div>Lorem ipsum dolor sit amet</div>
<h3>tab 2</h3>
<div>Lorem ipsum dolor sit amet</div>
</div>
Javascript code
$(function(){
$('#multiOpenAccordion').multiAccordion();
// you can use a number or an array with active option to specify which tabs to be opened by default:
$('#multiOpenAccordion').multiAccordion({ active: 1 });
// OR
$('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });
$('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});
UPDATE:
the plugin has been updated to support default active tabs option
UPDATE:
This plugin is now deprecated.
Simple: active the accordion to a class, and then create divs with this, like multiples instances of accordion.
Like this:
JS
$(function() {
$( ".accordion" ).accordion({
collapsible: true,
clearStyle: true,
active: false,
})
});
HTML
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
https://jsfiddle.net/sparhawk_odin/pm91whz3/
Actually was searching the internet for a solution to this for a while. And the accepted answer gives the good "by the book" answer. But I didn't want to accept that so I kept searching and found this:
http://jsbin.com/eqape/1601/edit - Live Example
This example pulls in the proper styles and adds the functionality requested at the same time, complete with space to write add your own functionality on each header click. Also allows multiple divs to be in between the "h3"s.
$("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
.hover(function() { $(this).toggleClass("ui-state-hover"); })
.prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.click(function() {
$(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
.next().toggleClass("ui-accordion-content-active").slideToggle();
return false;
})
.next()
.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
.hide();
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion styles</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3>Section 1</h3>
<div class="content">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
<h3>Section 2</h3>
<div>
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.
</div>
<h3>Section 3</h3>
<div class="top">
Top top top top
</div>
<div class="content">
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.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<div class="bottom">
Bottom bottom bottom bottom
</div>
<h3>Section 4</h3>
<div>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</div>
</div>
</body>
</html>`
I found a tricky solution. Lets call the same function twice but with different id.
JQuery Code
$(function() {
$( "#accordion1" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
$( "#accordion2" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});
HTML Code
<div id="accordion1">
<h3>Section 1</h3>
<div>Section one Text</div>
</div>
<div id="accordion2">
<h3>Section 2</h3>
<div>Section two Text</div>
</div>
Simple, create multiple accordian div each representating one anchor tag like:
<div>
<div class="accordion">
First heading
</div>
<div class="accordion">
First heading
</div>
</div>
It adds up some markup. But works like a pro...
Just call each section of the accordion as its own accordion. active: n will be 0 for the first one( so it will display) and 1, 2, 3, 4, etc for the rest. Since each one is it's own accordion, they will all have only 1 section, and the rest will be collapsed to start.
$('.accordian').each(function(n, el) {
$(el).accordion({
heightStyle: 'content',
collapsible: true,
active: n
});
});
Even simpler, have it labeled in each li tag's class attribute and have jquery to loop through each li to initialize the accordion.
Without jQuery-UI accordion, one can simply do this:
<div class="section">
<div class="section-title">
Section 1
</div>
<div class="section-content">
Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="section">
<div class="section-title">
Section 2
</div>
<div class="section-content">
Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
And js
$( ".section-title" ).click(function() {
$(this).parent().find( ".section-content" ).slideToggle();
});
https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/
open jquery-ui-*.js
find $.widget( "ui.accordion", {
find _eventHandler: function( event ) { inside
change
var options = this.options, active = this.active, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, toShow = collapsing ? $() : clicked.next(), toHide = active.next(), eventData = {
oldHeader: active,
oldPanel: toHide,
newHeader: collapsing ? $() : clicked,
newPanel: toShow };
to
var options = this.options,
clicked = $( event.currentTarget),
clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
collapsing = clickedIsActive && options.collapsible;
if (clickedIsActive == true) {
var toShow = $();
var toHide = clicked.next();
} else {
var toShow = clicked.next();
var toHide = $();
}
eventData = {
oldHeader: $(),
oldPanel: toHide,
newHeader: clicked,
newPanel: toShow
};
before active.removeClass( "ui-accordion-header-active ui-state-active" );
add if (typeof(active) !== 'undefined') { and closing }
enjoy
I know this question specifically asks for jQuery UI.
I always find myself exploring jQuery UI Accordion and then remembering that I can just use the native DETAILS and SUMMARY elements (except for IE11) to implement essentially the same type of feature: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Just a reminder in case you forget as often as I do.