How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3>header</h3>
<div>
Content goes here
</div>
<h3>header</h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
Related
i'm using MutationObserver to observe the DOM for insertions or changes of the DOM. But what I want to achieve additionally, is to reproduce the DOM changes in some kind of backend.
Lets say I have the following DOM:
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
On click on a button, the corresponding parent li gets a new child element (h1, div, span, whatever). Now the MutationObserver gets fired, and I can get information on the added element (and maybe the children).
For some kind of replay though, I want to get the excact position of the parentNode of the inserted element.
Lets say I press the button of the second element, the DOM changes to
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
<span>Example text</span> <!-- Node has been added -->
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
Now, what I need, is the excact position of this node. For example
div.container > div.row.marketing > li[2]
What I can't rely on are ID or something like this. I want to use this script on sites, where I don't have control over the DOM, or where is a lot of dynamic data, which makes it very inconvenient to add a unique ID to every element.
I have looked into XPath, which obviously isn't supported natively in javascript.
Does anyone has an idea how to achieve this?
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks
To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');
My about page have three jquery tabs(I have used easy tab plugin). When I refresh the page with second tab the header portion is not showing up. and when I click the tab in a new browser tab also the header is not showing up. How can I solve this?? (Just click the second tab and refresh the page)
here my content
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>
<a href="#tabs1-html">
HTML Markup
</a>
</li>
<li class='tab'>
<a href="#tabs1-js">
Required JS
</a>
</li>
<li class='tab'>
<a href="#tabs1-css">
Example CSS
</a>
</li>
</ul>
<div class='panel-container'>
<div id="tabs1-html">
<h2>
HTML Markup for these tabs
</h2>
<p>
Dummy content
</p>
</div>
<div id="tabs1-js">
<h2>
JS for these tabs
</h2>
<p>
dummy content 2
</p>
</div>
<div id="tabs1-css">
<h2>
CSS Styles for these tabs
</h2>
<p>
dummy content 3
</p>
</div>
</div>
</div>
Here my Js
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
javascript link1
javascript link 2
Here my page link
Live page
Your code JS :
$(document).ready( function() {
$('#tab-container').easytabs();
});
is not executed.
If you execute it in the console, you will see your tabs correctly displayed.
Where have you put this code ?
I have one ul li list and I want to put that content between ..
What I have
<div id='a'>
<ul>
<li>
<li>
<li>
</ul>
</div>
what I want to do is that using jquery I want to add div before and after this content like this
What I want
<div id='a'>
<div id='b'>
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
What I am using is append or before but not getting properly result.
I used following code.
$("#a").prepend("<div id='b'>");
$("#a").append("</div>");
But I got result like this.
<div id='a'>
<div id='b'></div>
<ul>
<li>
<li>
<li>
</ul>
</div>
please help me.
You can use .wrap() to do this:
$("ul").wrap("<div id='b'></div>");
Demo Fiddle
Use wrap()
This will exactly do what you want:
$("#a > ul").wrap("<div id='b'></div>");
Look at the doc: http://api.jquery.com/wrap/
Try this
$("ul").wrap("<div id='b'></div>"); and here is the working example