jQuery Accordion: Activating a Panel on clicking a Jumplink

jQuery Accordion: Activating a Panel on clicking a Jumplink - javascript

I'm not great with jQuery when it comes to manipulating javascript. I have this large file that I condensed into this fiddle. The format needs to be the same, and what I'm trying to do is:
When clicking on the Jumplink in Question 4, it should open the panel in Question 1.
http://jsfiddle.net/jzhang172/v5heud2x/1/
$(function() {
$( "#accordion" ).accordion();
$( ".active" ).accordion({
active: false,
collapsible: true,
});
});
div > p {
background:green;
}
.active{
height:500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<li class="active">
<h3>Question 1</h3>
<div>
<p>Answer 1</p>
</div>
</li>
<li class="active">
<h3>Question 2</h3>
<div>
<p>Answer 2</p>
</div>
</li>
<li class="active">
<h3>Question 3</h3>
<div>
<p>Answer 3</p>
</div>
</li>
<li class="active">
<h3>Question 4</h3>
<div>
<p>Answer 4 (jumplink to answer 1)</p>
</div>
</li>
</div>

Let me know if this is what you meant. The main thing I did is to trigger the click event on the q1.
JSFiddle
HTML
<div id="accordion">
<li class="active">
<h3 id="q1">Question 1</h3>
<div>
<p>Answer 1</p>
</div>
</li>
<li class="active">
<h3>Question 2</h3>
<div>
<p>Answer 2</p>
</div>
</li>
<li class="active">
<h3>Question 3</h3>
<div>
<p>Answer 3</p>
</div>
</li>
<li class="active">
<h3>Question 4</h3>
<div>
<p id="q4">Answer 4 (jumplink to answer 1)
</p>
</div>
</li>
</div>
JS
$(function () {
$("#accordion").accordion();
$(".active").accordion({
active: false,
collapsible: true,
});
});
$(document).ready(function () {
$("#q4").click(function () {
$( "#q1" ).trigger( "click" );
});
});
CSS
div > p {
background:green;
}
.active {
height:500px;
}
Option 2
you can remove the q1 id and change the js to:
$("#q4").click(function () {
$("#accordion").accordion("option", "active", 0);
});

Related

active class menu item on javascript or php

I've menu items code....and I want if I click on menu a it will displaying a page, if I click on menu b it will displaying page b with out page a....
Can anyone show me how to solve this with javascript or php, I'm newbie.... please help..
This is my HTML code
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p>page b</p>
</div>
</div>

First you need to hide page b,give id's to your div to show/hide via javascript:
<div class="col-xs-9">
<ul class="menu-items">
<li id="showA" class="active"></li>
<li id="showB">b</li>
</ul>
<div id="pageA" style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">
page a
</p>
</div>
<div id="PageB" class="attr1" style="width:100%;border-top:1px solid silver;display:none">
<p>page b</p>
</div>
</div>
Javascript code to show particular page:
<script>
$(document).ready(function() {
$("#showA").click(function() {
$("#pageB).hide();
$("#pageA").show();
});
$("#showB").click(function() {
$("#pageA).hide();
$("#pageB").show();
});
</script>
To set your menu active use following code:
$(".menu-items li").click(function() {
$(".menu-items li").removeClass("active);
$(this).addClass("active");
});

you mean you want to open a new page when you click on list item, so just do this window.open(pass your page url here)
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p onclick="function(){window.open(pageUrl)}">page b</p>
</div>
</div>

how to display the links in tabs in bootstrap?

i need to display the a.php,b.php,c.php in the tabs tab2,tab3,tab4 respectively i have written the following code but the links a.php,b.php,c.php is not displaying in the tabs tab2,tab3,tab4 respectively instead of that if i click on the tab2 it redirects to the a.php page but i need to display in a tab manner in which if i click the tab2 it should display the a.php in the tab2 respectively what should i change to display the links on the tab ? kindly help me Thanks in advance
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>

You can change the href link by using $("#tab1").attr("href", "#a.php");
$(function(){
$("#tab1").attr("href", "#a");
$("#tab2").attr("href", "#b");
$("#tab3").attr("href", "#c");
$("#tab4").attr("href", "#d");
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
<li><a id="tab2" href="#tab-2">Tab 2</a></li>
<li><a id="tab3" href="#tab-3">Tab 3</a></li>
<li><a id="tab4" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab">
<div id="a" class="tab-content">
<p>Tesing a.php </p>
</div>
<div id="b" class="tab-content">
<p>Tesing b.php </p>
</div>
<div id="c" class="tab-content">
<p>Tesing c.php </p>
</div>
<div id="d" class="tab-content">
<p>Tesing d.php </p>
</div>
</div>
</div>

Solution
Fix is to put your script code into a document ready function as below
<script>
$(window).load(function() {
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
});
</script>
Alternate Solution
Alternatively, you can workout as below.
As you are loading jquery from a third party domain, this document ready statements are executed first asynchronously. So download the jquery.min.js and load it from your local.

siblings() in jQuery is not working

I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>

The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');

You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.

Is it possible to simplify jQuery string for toggle?

I have page with more icons and when you click on the icon you can see div where is some content. I would like to know if it is possible to write it somehow more simple then I do. I have 10 icons and I want to have always only one Div opened, so jQuery is quite long and 10 times almost the same.
This is how my jQuery looks like for 1 icon. It is almost the same for rest of them
$(".icon_pl").click(function(){
$("div#show").hide("slow");
$("div#rockz").hide("slow");
$("div#join").hide("slow");
$("div#wedding").hide("slow");
$("div#pl").toggle("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
} else {
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");}
return false;
});
Icons
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li><span class="icon_join"></span><h3>Join Us</h3></li>
<li><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
It works, but I would like to know if it is possible to make it somehow more simple and to write down every id (each div is different with different content, this is why id and not class)
Thank you

How about this. Note the selector is the LI since the span has no content
Actually Can you change the class on the span to ID or DATA attribute so one can always use
$span.attr("id").split("_")[1]; or $span.data("div2show");
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
.content div {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

you could put the name of the relating div in either a rel attribute or in a data prefixed attribute
then in JS/Jquery hide all of the divs, and only show the one you need - that relates to the new attribute.
something along the lines of
$(".icon").click(function(){
$(".maindivs div").hide();
var toggleDiv = $(this).attr("data-divToToggle");
$("#"+toggleDiv ).slideDown("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
}
else
{
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");
}
return false;
});

Following script would do what you expect.
$(function () {
//hide all div on load except first one
$('div.content div:not(#pl)').hide();
$("li.icon").click(function () {
var div = $(this).data('div');
$('div.content div.icon_active')
.removeClass('icon_active')
.hide('slow');
$('div.content div#' + div)
.addClass('icon_active')
.show('slow');
return false;
});
});
Your HTML would look something liek this.
<div class="iconteiner">
<ul>
<li class='icon' data-div='pl'><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li class='icon' data-div='join'><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li class='icon' data-div='wedding'><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li class='icon' data-div='rockz'><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li class='icon' data-div='show'><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
<div class="content">
<div id="pl" class="icon_active">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Here is WORKING JS FIDDLE

Unless the elements are related hierarchically, I'd add a data attribute to be able to easily find the correct content.
$(function() {
$('li[data-content]').click(function(){
$('li[data-content] span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
$('.content div').hide();
$('.content div[id='+$(this).data('content')+']').show();
});
});
.content div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li data-content='pl'><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li data-content='join'><span class="icon_join"></span><h3>Join Us</h3></li>
<li data-content='wedding'><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li data-content='rockz'><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li data-content='show'><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>

Switch visibility of element in onClick() method

I have an unordered list and a bunch of articles, all with absolute positions at the top of the page and hidden. Each article sits in a different div and has a different ID. I'd like to be able to click a list item and the corresponding article to become visible, and then when I click a different list item, the visible item disappears and the new article that corresponds with that article appears in its place.
Here's the HTML
<div class="articlelist">
<ul>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article1').style.visibility='visible'">ARTICLE 1</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article2').style.visibility='visible'">ARTICLE 2</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article3').style.visibility='visible'">ARTICLE 3</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article4').style.visibility='visible'">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
and here's the CSS
.fullarticle {
width: 61%;
margin-right: 2%;
float: left;
position: absolute; top: 80px; left: 37%;
visibility: hidden;
}
.articlelist {
float: left;
width: 37%;
}

inside of the head:
var toggleVisibility = function(element) {
if(element.style.visibility=='visible'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
};
and then change the onclicks (if you insist on using them) to onclick="toggleVisibility(document.getElementById('articleId'))" where articleID is the ID of one of the article divs
BUT
hiding and showing content with visibility will keep the lower items under their invisible partners, so use display with none and block instead
var toggleVisibility = function(element) {
if(element.style.display=='block'){
element.style.display='none';
} else {
element.style.display='block';
}
};
This is a little bit more complicated, but avoids importing the massive jQuery library for so small a task

If you use jQuery, you can do:
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').hide();
$('#article' + (i+1)).show();
});
Updated Fiddle

If you have jQuery:
<div class="articles">
<div class="articlelist">
<ul>
<li style="display:block;" onclick="toggleArticles('article1')">ARTICLE 1</li>
<li style="display:block;" onclick="toggleArticles('article2')">ARTICLE 2</li>
<li style="display:block;" onclick="toggleArticles('article3')">ARTICLE 3</li>
<li style="display:block;" onclick="toggleArticles('article4')">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
</div>
<script>
function toggleArticles(articleID) {
$('#articles .fullArticle').hide(); // this hides all currently open articles (if any);
$('#articles #' + articleID).show(); // show article
}
$('#articles .fullArticle').hide();
</script>

Develop Reference

JavaScript is the programming language of the Web.

jQuery Accordion: Activating a Panel on clicking a Jumplink - javascript

Related

active class menu item on javascript or php

how to display the links in tabs in bootstrap?

siblings() in jQuery is not working

Is it possible to simplify jQuery string for toggle?

Switch visibility of element in onClick() method

Categories

Resources