I'm working on a dropdown with javascript. My HTML does not work and I can't find the problem... I think I've done right but maybe it's the link who does not work.
$(document).ready(function() {
$("article.hey > *:not(header)").hide();
$("article.hey header").on("click", function() {
$(this).nextAll("*").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<article class="hey">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
</p>
</article>
</header>
Thanks!
The structure of your HTML must be the header tag inside the article tag:
$(document).ready(function() {
$("article.hey > *:not(header)").hide();
$("article.hey header").on("click", function() {
$(this).nextAll("*").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="hey">
<header>I'm the header 'CLICK ME'</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
</p>
</article>
Related
Obv
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/scripts.js"></script>
I have a link that point to a section down the page
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
the css for the div that i want to fade in while moving to it
#down {
margin-top: 100%;
justify-content: center;
visibility: hidden;
}
but my script doesnt work :(
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
Building this site in local
I this one is your looking for?
$(document).ready(function(){
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
});
#down {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
<p id="down" >Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
If you need the object to fadeIn, you have to start your object hidden using display: none.
You can check this example:
$("#show-more").click(function(e) {
e.preventDefault();
$("#show-more").hide();
$("#more").fadeIn();
});
#more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<p id="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<a id="show-more" href="#">Show more</a>
After click the "Click" button
From the above images, you can see that the box is cropped after click. I want the Liquid Slider auto expand when I click the button to add the height of the box.
Understand that this slider come with the auto height function that detect the height of the content. But it doesn't work if I added $(".bxspace1").animate({height: "+=15"});
I refer the code from Liquid Slider, you can check here. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
function increaseFontSize1() {
$(".bxspace1").animate({height: "+=15"});
}
.ctnbox2 a{width: 196px; float:left; border:3px solid #75b653; margin: 0 6px; background-color:#fff; color: #75b653; }
.bxspace1{height: 200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
Click
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<div class="ctnbox2">
<a href="#">
<div class="bxspace1">
<div class="tiwbckg">
<div class="floatleft condo"></div>
<div class="floatleft">
<h2 class="maintitle1"><main_content>Condominium</main_content><br/><br/></h2>
</div>
<div class="clear"></div>
</div>
<div class="boxtxt1">
<div class="boxtitle"><main_content>Sed Congue Egestas</main_content></div>
<p><main_content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec augue a lorem iaculis vehicula.</main_content></p>
</div>
</div>
</a>
</div>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<br/><br/>
So easy but I never realized, just use the same method and apply it to class="liquid-slider".
$('.liquid-slider').animate({height: "+=10"});
I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible).
I am not good in javascript at all. Now I have something like this:
.html
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
.js
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide();
} else{
$(this).next('.slidingDiv').show();
}
});
});
https://jsfiddle.net/Elfiszcze/49vd6d6k/2/
Could someone help me with this one?
When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
//hide all sliding divs
var arrayLikeOfSlidingDivs = $('.slidingDiv');
arrayLikeOfSlidingDivs.each(function(){
if ($(this).is(':visible')){
$(this).hide(500);
}
});
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide(500);
} else{
$(this).next('.slidingDiv').show(500);
}
});
});
<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
my div looks like this. I want to replace it with data that I am getting from a JSON file. However I only want to show 1 entry at a time and make it animate between entries (does not need to be fancy).
My question is how can I get jQuery to change between my JSON data?
My JSON data looks like
[
{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."
},
I would appreciate any help or links to examples.
Thanks
Added data-index to track data index that we are showing
<div id="rightside" data-index='-1'>..</div>
It will change your data after every 5 seconds in rotating manner.
setTimeout(function(){
var yourJsonData = [{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"},{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"}];
var currentIndex = $("#rightside").attr('data-index');
var totalLengthOfData = yourJsonData.length;
var indexToShow = currentIndex+1;
if(indexToShow > totalLengthOfData){
indexToShow=0;
}
$("#rightside").attr('data-index',indexToShow);
var dataToAppend = yourJsonData[indexToShow];
$("#rightside").children().remove();
$("#rightside").append("<h1>"+yourJsonData['name']+"</h1>").
append("<p>"+yourJsonData['year']+"</p><p><a href='"+yourJsonData['linktowiki']+"'>learn more</a></p>");
},5000);
haven't tested the code yet
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var yourJsonData = '[{"name": "Elizabeth Cady Stanton","image": "media/images/elizabeth.jpg","year": "1815 – 1902","wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton", "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."}]'
var obj = JSON.parse(yourJsonData);
$('#rightside').find('h1:first').text(obj[0].name);
$('#rightside').find('p:first').text(obj[0].year);
$('#rightside').find('a:first').attr('href', obj[0].wikilink)
$('#rightside').find('p:eq(3)').text(obj[0].article)
});
</script>
<body>
<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
</body>
</html>
Your problem can be solved by this:
HTML:
<div id="rightside">
<h1 id="nameOfPerson"></h1>
<p id="year">
</p>
<a id="wikiLink">Learn More</a>
<p id="article"></p>
<p></p>
<button id="fill">Start</button>
</div>
JQuery :
var dataObject = [{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Whole Article"
}];
$("#fill").click(function() {
setData(dataObject);
});
var setData = function(data) {
$.each(data, function(index, mainData) {
$("#nameOfPerson").text(mainData.name);
$("#year").text(mainData.year);
$("#wikiLink").attr("href",mainData.wikilink);
$("#article").text(mainData.article)
});
};
By this code your data will be rendered dynamically.
For Demo you can check my fiddle :
Fiddle Link Here
How can I create links that will expand a particular accordion section and then scroll to a particular DIV within that section?
I'm using the latest jQuery UI library as well as jquery.multi-accordion-1.5.3.js, and developing for IE8 or later
I've been able to successfully implement both multiAccordion and by parsing a query string I can manipulate which section to be expanded, and scroll to the first hash anchor.
Strangely, this seems to work only for the first link, for any other link it scrolls past the corresponding hash anchor, and overall it acts erratically.
I came across a few threads mentioning IE having issues recognizing hash anchors in a query string like this index.php?page=page1#section3 , ie...Why does Internet Explorer not support bookmarks with both a querystring and a hash/anchor? Firefox works properly but I have not come across one solution...
Has anyone have a solution for this? Any alternatives?
Here is my code (or if it's more legible for you - the fiddle with the same code http://jsfiddle.net/3QSmq/1/)
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Multi Open Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.9.custom/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion-1.5.3.js"></script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
SOMETHING<br />
SOMETHING1
<div id="multiAccordion">
<h3>tab 1</h3>
<div>Text here
</div>
<h3>tab 2</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 3</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something1" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 4</h3>
<div>Text Here
</div>
</div>
JavaScript
$(function(){
$('#multiAccordion').multiAccordion({
active: [1, 2],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
$('#multiAccordion').multiAccordion("option", "active", [y]);
});
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var x = getQueryVariable("page");
switch (x){
case(x = "tab1"):
y = 0;
break;
case(x = "tab2"):
y = 1;
break;
case(x = "tab3"):
y = 2;
break;
case(x = "tab4"):
y = 3;
break;
case(x = false):
y = "";
break;
default:
y ="";
break;
}
Any suggestions?
P.S. Here is THE closest description of my issue elsewhere on the web but no answer...Another thread
Instead of including the tab with the page, just target the ID from the hash. So your links will look like this:
SOMETHING<br />
SOMETHING1
Then you can include this code to find the ID from the hash, find the correct tab and open it. Here is the complete code & demo:
$(function() {
var updateAccordion = function(hash) {
hash = hash || window.location.hash;
var content, tab;
// look for a hash
if (hash && $(hash).length) {
// find accordion content
content = $(hash).closest('.ui-accordion-content');
if (content.length) {
// find "tab#" from <a> inside of accordion header (h3)
tab = parseInt(content.prev('h3').find('a').attr('id').replace('tab',''), 10) - 1;
$('#multiAccordion').multiAccordion("option", "active", [tab]);
}
}
};
// intercept all clicked links and look for a hash
$('a').click(function(){
if (this.hash) {
updateAccordion(this.hash);
}
});
$('#multiAccordion').multiAccordion({
active: [1],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
// open up accordion to correct tab after initialization
updateAccordion();
});
Try using document.location.hash to access directly the hash parameters.
In your example :
index.html?page=tab2#something
document.location.search will be ?page=tab2
document.location.hash will be #something
You are trying to parse the wrong value, so I guess the JQuery plugin scroll to the bottom of the page when it's trying to open a tab that doesn't exists.