I have a xml document that i'm using XSLT to create an accordion. The xslt/xml should only create an accordion of an h3 if the folder has a child. At the same time, I need the accordion to generate single page links. How can I accomplish this? The ordering does matter so I can't move the single page links outside of the accordion div....
My Single page link to Google breaks the accordion. I'd like to keep all of the elements h3s. Is there a way to get the accordion to ignore h3s that don't have a div sibling?
http://jsfiddle.net/gcqmv/
<div id="accordion">
<h3>Section 1</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 2</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Single Page Link to Google</h3>
<h3>Section 3</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
Your ul tag after the google link does not have an opening "<". The a is missing the closing tag too, making everything that follows a live link to google. I also threw it in an html structure like so and seems to work for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 2</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Single Page Link to Google</h3>
<h3>Section 3</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>
for future stackoverflowers, I just targeted the accordion code with a header class.
<script>
$(function() {
$("h3").siblings(".banner").not(".active").hide();
$( "#accordion" ).accordion( { header: 'h3.folder', collapsible: true});
});
</script>
</head>
<body>
<div id="accordion">
<h3 class="folder">Section 1</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3 class="folder">Section 2</h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Single Page Link to Google</h3>
<h3 class="folder">Section 3</h3>
<div>
ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
Related
I use this code for my slider in my view
but I want to show the last 3 items
<div class="flexslider">
<ul class="slides">
#foreach (var item in ViewBag.blog)
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>
<div class="flexslider">
<ul class="slides">
#foreach (var item in ((List<your Model>)ViewBag.blog).Skip(((List<your Model>)ViewBag.list).Count-3))
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>
Why my tooltip not working :(? I'm checking it 2 hours and i don't have any mind.
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
$('.changebk a').tooltip({
content: '<img src="img/logom.png" alt="Here it;s me">'
}); // koniectoltip
you should add title in your html code inside
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
</div>
see the example here https://jsfiddle.net/ct6vrao8/
i am using the existing jquery UI tabs..
<div id="tabs">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
<div id="tabs-1">
<p>t1 content</p>
</div>
<div id="tabs-2">
<p>t2 content</p>
</div>
<div id="tabs-3">
<p>t3 content</p>
</div>
</div>
when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>
when I append some <li> elements in <ul> using the following jquery code:
$('#tabs ul').append($('<li>title 4</li>');
The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.
Please give some insight into it.
You also need to add the div with the tab id:
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Then try a refresh on tabs:
$("div#tabs").tabs("refresh");
WORKING Fiddle
How can i create simple nested collapsible widget ?
This is what i've tried :
<div data-role="collapsible" data-theme="b">
<h2>2KB</h2>
<table border="1">
<thead>
<tr>
<td>Description</td>
<td>Week number</td>
<td>Total demand</td>
<td>Average daily on demand</td>
<td>Quantity on hand</td>
<td>Days stock on hand</td>
</thead>
<tbody id="warehouseList" padding="0">
<div data-role="collapsible"></div>
</tbody>
<tfoot></tfoot>
</table>
</div>
Any help will be hihgly appreciated.
<div data-role="page">
<div id="accordion">
<div data-role="collapsible">
<h3 data-role="header"> Some top level contents </h3>
<ul data-role="listview">
<li> contents </li>
</ul>
</div>
<div data-role="collapsible">
<h3 data-role="header"> Some top level contents </h3>
<ul data-role="listview">
<li> contents </li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#accordion').accordion({header: 'h3'});
$('#accordion').accordion('activate', 2);
});
</script>
I have:
<div class="ui-widget">
<div class="ui-widget-header">
<span class="ui-icon ui-icon-circle-triangle-n">My Menu</span>
</div>
<ul class="ui-widget-content">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
My jQuery is:
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
});
Q: How do I toggle classes between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s as the user clicks on .ui-widget-header?
Simplest way to do it would be to use .toggleClass()
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
$('.ui-icon', this).toggleClass('ui-icon-circle-triangle-n ui-icon-circle-triangle-s');
});