I'm trying to using the jQuery UI according to slide open some DIVs. I want the links to be located elsewhere and target the specific DIVs dependent on their ID. How would I go about doing this? Any tips to point me in the right direction?
Something sort of like this:
<script>
jQuery().ready(function() {
jQuery("#accordion" ).accordion({
collapsible: true,
active: false,
navigation: true
});
});
</script>
and:
<h3>Section 1</h3>
<h3>Section 2</h3>
<h3>Section 3</h3>
<h3>Section 4</h3>
<div id="accordion">
<div id="1">
<p>content</p>
</div>
<div id="2">
<p>content</p>
</div>
<div id="3">
<p>content</p>
</div>
<div id="4">
<p>content</p>
</div>
</div>
You can use the activate method.
Signature:
.accordion( "activate" , index )
Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass false to close all (only possible with collapsible:true).
Buy using $(link).click(function(){}), you can select the id of the clicked element and
pass the id in the index of the activate method like:
.accordion( "activate" , "#" + id);
You want something that looks more like this.
<div id="accordion">
<h3>Section 1</h3>
<div id="1">
<p>content</p>
</div>
<h3>Section 2</h3>
<div id="2">
<p>content</p>
</div>
<h3>Section 3</h3>
<div id="3">
<p>content</p>
</div>
<h3>Section 4</h3>
<div id="4">
<p>content</p>
</div>
</div>
You are trying to make an accordion slide up and down when clickig elsewhere on the page? If you are then I would just call the click event of the accordion heading you wish to click.
For example with the following accordion markup:
<a href='' id='activateAccordion' />
<div id="accordion">
<h3>Section 1</h3>
<div id="section1">
<p>content</p>
</div>
<h3>Section 2</h3>
<div id="section2">
<p>content</p>
</div>
</div>
You could make section 1 slide up down when clicking the link 'activateAccordion' like so:
$('#activateAccordion').click(function() {
$('a ##section1').click();
});
Here's a jsfiddle of the solution.
Slightly modified HTML: (notice the class and href attributes):
<h3><a class='acc-link' href="#1">Section 1</a></h3>
<h3><a class='acc-link' href="#2">Section 2</a></h3>
<h3><a class='acc-link' href="#3">Section 3</a></h3>
<h3><a class='acc-link' href="#4">Section 4</a></h3>
<div id="accordion">
<h3 id="1"></h3>
<div>
<p>content</p>
</div>
<h3 id="2"></h3>
<div>
<p>content</p>
</div>
<h3 id="3"></h3>
<div>
<p>content</p>
</div>
<h3 id="4"></h3>
<div>
<p>content</p>
</div>
</div>
JS using the activate method:
jQuery().ready(function() {
var acc = $("#accordion").accordion({
collapsible: true,
active: false,
navigation: true
});
$('.acc-link').click(function () {
acc.accordion("activate", $(this).attr('href'));
});
});
One thing to note: the href attribute argument passed into the activate method is interpreted as a CSS selector, which conveniently (and coincidentally) starts with the # selector, so it "just works" with any valid ID.
Related
HTML
<div class="box-container">
<h3 class="box-title">Title 1</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 2</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 3</h3>
</div>
jQuery
$('a:not([aria-label])').attr('aria-label', function() {
var txt = $(".box-container > .box-title").text();
$(this).attr("aria-label", txt);
});
The problem is that the above div appears 3 times inside the whole page, so the code above will return and apply as an aria-label in the link, all the titles that have these classes.
Example: aria-label="Title element 1Title element 2Title element3"
So I am trying to figure out why the above does not apply to the link of the div, the specific .box-title class for each div, only.
What I try to achieve and $(this) does not work properly:
<div class="box-container">
<h3 class="box-title">Title 1</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 2</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 3</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<h3 class="box-title">Title 1</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 2</h3>
</div>
<div class="box-container">
<h3 class="box-title">Title 3</h3>
</div>
<script>
$('a:not([aria-label])').attr('aria-label', function() {
var txt = $(this).parent().find(".box-title").text();
$(this).attr("aria-label", txt);
});
</script>
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
sorry for the midunderstanding. I meant index, not value. Sorry.
I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?
For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.
Here is my fiddle: http://jsfiddle.net/kqbLtn8b/1/
HTML:
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
jquery:
var boxVal = $('.box').val();
Thanks for any help!
What I am really trying to do is shorten the code from something like this:
$('.one').on('click', function(){
$('.b-one').show()
});
and so forth with the rest
Try this : use index of content div to show hidden-box
$(function(){
$('.content').click(function(){
var index = $(this).index();
$('.hidden-content .hidden-box:eq('+index+')').show();
});
});
And make change in your css, instead of hiding hidden-content div you need to hide hidden-box. So change your
.hidden-content{
display:none;
}
to
.hidden-box{
display:none;
}
Demo
If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.
Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.
Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.
So my suggestion would be to follow the below method.
HTML:
<div class="box">
<div class="content one" rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-1">one</div>
<div class="hidden-box b-2">two</div>
<div class="hidden-box b-2">three</div>
</div>
JS:
$('.content').on('click', function(){
var divNum = this.rel;
$('.b-'+divNum).show();
});
I recommend restructuring your HTML in the following way:
<div class="box">
<div class="content" id= "c1">
<h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
<h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
<h1>Cont 3</h1>
</div>
<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>
then use this as your jquery code:
$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});
and by the way, change your css too:
.hidden-content{
/* display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}
This is another way (although not so reliable, as it would break if you change your classes):
$(function () {
$('.content').on('click', function () {
var className = $(this).attr('class').replace('content', '').trim();
$('.hidden-box').hide();
$('.b-' + className).show();
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
UPDATE
Based on #Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup.
You just need to add a data attribute to your markup that will be used to match elements:
$(function () {
$('.content').on('click', function () {
var sel = $(this).data('rel');
$('.hidden-box').each(function () {
$(this).toggle($(this).data('rel') == sel);
});
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
<div class="content one" data-rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" data-rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" data-rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one" data-rel="1">one</div>
<div class="hidden-box b-two" data-rel="2">two</div>
<div class="hidden-box b-three" data-rel="3">three</div>
</div>
I'm trying to make a accordion sortable but at the moment it seems flickery compared to the default example.
I believe the issue is related to my nesting structure but I thought that wrapping the content in a div would have solved that.
The actual accordion works fine it just seems to struggle when using the sortable command.
I'm trying to use a styled bar like this for the section headers:
https://www.dropbox.com/s/y5ebikvx9kc9jmu/Screenshot%202014-06-25%2018.09.01.png
Which will then reveal a multi column div content.
The Jquery:
// Accordion
$( "#accordion" )
.accordion({
header: ".accordion-section",
collapsible: true,
})
.sortable({
axis: "y",
handle: ".accordion-order",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( ".accordion-order" ).triggerHandler( "focusout" );
}
});
The HTML
<!-- ACCORDION -->
<div id="accordion">
<!-- ACCORDION SECTION HEADING 1 -->
<div class="grid dark-grey-bkg accordion-section">
<span class="accordion-section-number">1</span>
<span class="accordion-section-title">This is an example title 1</span>
<span class="accordion-order">^</span>
</div>
<!-- /ACCORDION SECTION HEADING -->
<!-- ACCORDION SECTION CONTENT 1 -->
<div class="accordion-content">
<div class="col-8">
<div>
<h3>Content Here</h3>
</div>
</div>
<div class="col-4">
<div>
<h3>Content Here</h3>
<div>
<div class="col-12">
<h3>Content Here</h3>
</div>
</div>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
</div>
</div>
</div>
<!-- /ACCORDION SECTION CONTENT 1 -->
I think you can wrap the complete header and content inside a div and then set that div as items option in sortable. That would solve your problem.
Demo:http://jsfiddle.net/lotusgodkk/ZNL77/13/
Js:
// Accordion
$("#accordion")
.accordion({
header: ".accordion-section",
collapsible: true,
heightStyle: 'fill',
})
.sortable({
axis: "y",
items: '.container', //selector which wraps the header and content
handle: ".accordion-order",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children(".accordion-order").triggerHandler("focusout");
}
});
HTML:
<!-- ACCORDION -->
<div id="accordion">
<div class="container">
<div class="accordion-section"> <span class="accordion-section-number">1</span>
<span class="accordion-section-title">This is an example title 1</span>
<span class="accordion-order">^</span>
</div>
<div>
<div class="accordion-content">Example Content</div>
</div>
</div>
<div class="container">
<div class="accordion-section"> <span class="accordion-section-number">1</span>
<span class="accordion-section-title">This is an example title 1</span>
<span class="accordion-order">^</span>
</div>
<div>
<div class="accordion-content">Example Content</div>
</div>
</div>
<div class="container">
<div class="accordion-section"> <span class="accordion-section-number">1</span>
<span class="accordion-section-title">This is an example title 1</span>
<span class="accordion-order">^</span>
</div>
<div>
<div class="accordion-content">Example Content</div>
</div>
</div>
</div>
Let me know if it solves your issue.
I'm using this javascript to make a div with 3 tabs; http://www.barelyfitz.com/projects/tabber/ (maybe it's easier to see the css code there instead of copying it all here?)
Anyway, I want to use a image inside of the tab instead of the H2 heading, which it uses by default. Is that possible?
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src doesn't work here></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
Thanks in advance!
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src="http://slembassyusa.org/downloads/Flag_of_Sri_Lanka.png" width=100 height=20 /></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
DEMO
You could use a tiny bit of additional js/jQuery code, something in this direction maybe:
$(".tabbernav a").each(function(i){
var $img = $("div.tabbertab:nth-child("+(i+2)+") h2 img")
if($img.length > 0) $(this).html($img);
});
that will grab the image from your h2 tag and place it into the tab instead of the heading text.
Demo
Hope this helps you in the right direction!