i m using Yii framework component CLISTVIEW on page load with ajax accordion stop working
i have tried follow, but it didn't work
$(".items").on('load',function(){
$(this).accordion();
});
when i change the event type in on form load to click it starts working. what would be the right event type to call here.
Accordion plugin expects this kind of content:
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
But if I've understand your situation, you have this kind of code:
<body>
<div class="items">
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
</div>
<div class="items">
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
</div>
</body>
With this script firs I .wrapAll .items elements and then I rewrite elements as accordion plugin want:
<script>
$(function() {
$('.items').wrapAll($('<div>').attr('id','accordion'));
$.each($('.items'),function(){
$(this).remove();
$('#accordion').append($(this).html());
});
$('#accordion').accordion();
});
</script>
HTML will be:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
</div>
And accordion will work fine.
Related
How to collapse all the nested collapsible-set and collapsible elements in nested collapsible set in Jquery Mobile?
Below is the code in the JSFiddle:
http://jsfiddle.net/ycP8y/
<body>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Assuming you are using jQM 1.2 as in your fiddle, you can just call trigger("collapse") on all collapsibles (http://demos.jquerymobile.com/1.2.1/docs/content/content-collapsible-methods.html ):
$(document).on("pageinit", function(){
$("#btnCollapse").on("click", function(){
$("[data-role=collapsible]").trigger("collapse");
});
});
Updated FIDDLE
I am creating a simple page with a number of tabs, and inside each tab there will be 3 sections which I am using an accordion for as this is the best solution for what I want. Everything works perfectly on the first tab, the accordion operates as it should and the content is rendered fine.
When I click on tab2 the content is rendered as just text with no accordion applied. I have used the dev tools and the accordion class is not being applied to the accordion div in tab2 for some reason. It may be that I am missing something really fundamental here but I would appreciate any help.
Excuse the basic code layout here but for demonstration purpose this is what the html might look like.
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1"><!-- Start of tabs-1 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
You have multiple divs with the same id, namely accordion. Either name them seperately, or use a class with your selector. For example:
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1">
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
And then:
$( ".accordion" ).accordion();
You have two <div>s with the same ID ("accordion"). I would recommend changing them to use a class of "accordion" rather than an ID, then change your jQuery to apply the accordion effect to <div.accordion>.
I have an accordion in jquery mobile that is being populated through json data. In order to keep the styling, I call $( ".folders" ).collapsibleset.( "refresh" ); after all the data has been appended and it works, but only for the main folders. In my code I have made subfolders and those do not receive the styling changes. Here is my folder code
<div class="folders" data-role="collapsible-set" data-corners="false" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Main Folder</h3>
<div data-role="collapsible">
<h3>Sub Folder</h3>
<p>
Subtext
</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
<div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
<h3>Read only Section 3</h3>
</div>
</div>
using the above pattern I want to make some divs within the collabsile-set with heading only and I want to make them non-collapsible because of some requirements. If anybody know anything regarding this, please let me know
The collapse/expand of content is being handled in the click handler of the collapsible heading.So by unbinding the click event you can keep accordion always expanded.
$(".ui-collapsible-heading").unbind("click");
A demo here - http://jsfiddle.net/8dLw4/
Edit
Edited fiddle for keeping some in expanded state always- http://jsfiddle.net/8dLw4/2/
An attribute data-allow-collapse is added.For sections you want to allow collapse,set it as true.For other sections false.
Here is the complete source code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page").live('pageinit', function(event) {
$(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 1-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 2-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 3-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 4-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Or you can use this code until section-box role is available:
<div class="ui-collapsible ui-body-c">
<h3 class="ui-collapsible-heading">
<span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
<span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
</span>
</span>
</h3>
<div class="ui-collapsible-content ui-body-c ui-corner-bottom">
<div>Content
</div>
</div>
</div>
You can do this:
$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
$(this).unbind();
});
When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open when a button is clicked?
When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
Search
</div>
<div id="resultsContainer" data-role="collapsible">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
Live Example:
http://jsfiddle.net/h2pPz/19/
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
<!-- Either button syntax works -->
<!-- Search -->
<input type="button" value="Search" id="search"/>
</div>
<div id="resultsContainer" data-role="collapsible" data-collapsed="true">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
</div>
</div>
JS:
$('#search').click(function() {
$('#resultsContainer').trigger('expand');
});