We Keep Coding

How to open a specific accordion section on a CSS radio button accordion from another page?

I have links on a page (index.html). The links go to a gallery page. The accordion section I want to open is on the gallery page.
Accordion 1
Open Model 4
Accordion 1 section 2
On the gallery page there are CSS accordions with CSS modals inside of the accordion sections that open.
The first link above opens the gallery page and brings accordion one to the top of the page, with the first section open (by default, as it is 'checked'.) A similar link to the second accordion also works the same way. The second link leads to the gallery page, and opens the modal, which would be great if that's what I wanted.
But the third link will only go to the gallery page. It won't open the section, and similar links to sections in another accordion won't bring that accordion to the top. (The gallery page is also responsive and has media queries, which bring the appropriate accordion to the top when I test it out by shrinking the browser width before clicking the link on the index page.)
What I want to happen is: click the link on the index page, go to the gallery page, bring the appropriate accordion to the top and open the corresponding accordion section.
I've looked at numerous answers on Stack Overflow. The one that comes closest to what I'm trying to do is here: Open jQuery Accordion
I also looked at many others and part of why I'm having difficulty figuring this out may be that I'm not using jQuery UI syntax (header/div/header/div/etc.)
<section class="gal-container" id="accordion1">
<!--start accordion one section 1 -->
<div class="modalDialog" id="openModal1">
<div>
<a class="modal-close" href="#close">×</a> Stuff
</div>
</div><!-- end modal one -->
<div>
<input checked id="ac-1" name="accordion-1" type="radio"> <label for="ac-1">Title</label>
<article>
Open Modal
<p>yadda information yadda</p>
</article>
</div><!--start accordion one section 2 -->
<div class="modalDialog" id="openModal2">
<div>
<a class="modal-close" href="#close">×</a> Stuff
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio"> <label for="ac-2">Title</label>
<article>
Open Modal
<p>yadda information yadda</p>
</article>
</div>
I've tried to figure this out using both javaScript and jQuery. What I've wound up with at the moment is trying to use the link with the specific section, making the hash my variable, and then making the radio button checked.
// find the id from the link
var radio = window.location.hash;
function checkRadio {
if radio === ("ac-1" || "ac-2" || "ac-3" || "ac-4") {
document.getElementById("accordion1").onclick = function() {
var openAcc = window.open(this.href);
} else {
document.getElementByID("accordion2").onclick = function() {
var openAcc = window.open(this.href);
}
// check the radio button
document.getElementById(radio).checked = true;
}
My Shortish fiddle

I was able to construct a partial answer using jQuery. I added this in the header of the page with the accordions on it.
jQuery(document).ready(function() {
// get the #section from the URL
var hash = window.location.hash;
// open accordion
$(hash).prop("checked", true); });
This will open the correct accordion panel, from an external page, using the third link, but the correct accordion won't come to the top of the page when it is resized for mobile.
This works:
Editing because I figured out the answer (based on the answer to this question: Loading page based on external link)
If the link looks like this:
<a class="open-local" href="#ac-1">Item 1</a>
This will open the section from any link on the same page with the open-local class:
//For local link to accordion
jQuery(document).ready(function() {
$('a.open-local').click(function(){
// get the #section from the URL
var hash = window.location.hash;
// open accordion
$(hash).prop("checked", true);
//scroll
var accordionTop = $(hash).closest('section');
$('html, body').animate({
scrollTop: $(accordionTop).offset().top
}, 500);
});
For links coming from an external page:
var hash = window.location.hash;
$(hash).prop("checked", true);
var accordionTop = $(hash).closest('section');
$('html, body').animate({
scrollTop: $(accordionTop).offset().top
}, 500);
});
My revised fiddle is here

Enable link after first click

Requirements:
When I clicked first time on menu item which has dropdown menu, It should show its dropdown and when I clicked on the same menu item second time it will redirect to its own page.
Please consider the situation. Menu item redirect to its own page only when its dropdown are opens
Reference Images:
Reference website link:
Reference website link
Note for referaence website:
1) Please open reference website link on mobile view.
2) Click on about page than Dental Page and than again About page , When you second time clicked on about page It goes to its own page. But on this occasion I want to open its dropdown and again If I clicked About page than it goes to its own page
Currently I am using jQuery bind function and disable link through event.preventDefault() but i didn't resolve my problem
Here's my code
jQuery Code:
$(document).ready(function(){
$(".flexnav li.parent-menu-item > a").bind("click.myclick", function(event) {
event.preventDefault();
$(".flexnav li .sub-menu").hide();
$(this).unbind(".myclick");
$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu").toggle();
});
});
Sorry for my language mistakesThanks!

Instead of handling the click event inside the $(document).ready function, you should try doing it inline with each li.
<li id="link1" onclick="ShowMenu('#menu1', 'index.html')">
<ul class="dropdown" id="menu1">
...
</ul>
</li>
<li id="link2" onclick="ShowMenu('#menu2', 'aboutus.html')">
<ul class="dropdown" id="menu2">
...
</ul>
</li>
<script>
function ShowMenu(menuId, linkRef){
var display = $(menuID).css('display');
if(display == 'block')
window.location.href = linkRef;
else{
$('dropdwon').hide();
$(menuId).show();
}
}
</script>
So, here, what I am doing is to call the ShowMenu() function with the id of the menu I want to show, as the parameter and the url of the page linked to it.
The function then checks if that menu is being displayed or not. If being displayed then it redirects the user to the url. If not, then it proceeds to hide all other dropdowns and shows only the one that was clicked.

You can use CSS class toggle to see if the dropdown is open or not and perform the action accordingly. (Assuming your current code is working fine to open dropdown)
$("body").on("click",".flexnav li.parent-menu-item > a",function(e){
var dropdowns=$(this).parent('li').children(".sub-menu");
var menu=$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu");
if(dropdowns.size()>0) {
if(!menu.hasClass('open')) {
e.preventDefault();
menu.addClass('open');
menu.show();
}
}
});

External link with Bootstrap 3 Tabs using JQuery

I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent li?:
HTML:
<li>
<a href="https://www.google.com/" class="external-link" target="_blank">
<span class="nav-text-wrapper">Example Tab Name</span>
</a>
</li>
Javascript:
$('.external-link').click(function(){
window.open($(this).attr('href'));
});
EDIT:
I found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs
var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
e.preventDefault();
$(this).tab('show');
});

How about this?
$('a.external-link').on('show.bs.tab', function (e) {
e.preventDefault(); // prevents the default tab selection behavior
window.open($(this).attr('href'));
});
show.bs.tab is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault(), you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com').

addClass in JQuery

I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.
Below is my HTML code:
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li id="home" class="active"> Home</li>
<li id="about"> About Us</li>
<li id="browse"> Browse</li>
<li id="contact"> Contact</li>
</ul>
</div>
And below is the JQuery code that I use and try to get this done.
$(function (){
var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
});
I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!

When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.
Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.
You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.
Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.

This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?

The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.
If you want to have a single page app, you can use preventDefault to stop the browser from following the link.
sidebar.delegate("li", "click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});

JQuery Tabs and Hyperlinking (help me fix my code, please)

I am using multiple pages that each have jQuery tabs. Lets say I have Page1.html with #tab1 and #tab2 and Page2.html with #tab3 and #tab4. My code has issues with:
1) Within the tab content, Page1.html#tab2 has a hyperlink to Page1.html#tab1. The link does not work - the page just stays on #tab1 when clicking the link. However, a hyperlink in the menu container on Page1 to #tab1 does work. Both hyperlinks use the same a href="#tab1" but for whatever reason, only the link outside of the Page1.html#tab2 content works when linking to Page1.html#tab1. The hyperlinks in the menu container always work.
2) If I send someone a hyperlink to www.Page1.html#tab2, the page URL shows as www.Page1.html with tab 1 showing, meaning I cannot link directly to a tab. However, the menu on the website does correctly link to tabs. If I click the menu link for Page2.html#tab3 while browsing Page1.html, the tab will correctly load and the URL shows Page2.html#tab3 and will remain that way even if I click #tab4 on the page. The URL ONLY changes when clicking menu hyperlinks to different pages, i.e. Page1.html#tab1 to Page2.html#tab3. Clicking Page2.html#tab3 while on Page2.html#tab4, the tab content will correctly change to #tab3 but the URL will remain as Page2.html#tab4.
What I Want:
A) To be able to send someone a link directly to a tab. Sending someone a link to www.Page1.html#tab2 will always load as the URL www.Page1.html with the first tab displaying. However, the menu hyperlinks on the page do work.
B) To be able to link between tabs on the same page if the link is within the tab content. For example, a link in the content of Page1.html#tab1 should be able to link to Page1.html#tab2. Right now, it only works if the link in the content of Page1.html#tab1 is linking to a tab on a separate page like Page2.html#tab3.
C) **EXTRA CREDIT**: When I click directly on a tab, the tab image "pops" out and the previously selected tab "unpops". When I click a menu hyperlink to a tab, the previous tab remains popped out even with the correct content for the newly selected tab showing. Or, if using a menu link to travel to a tab on a new page, no tabs "pop" out but the correct tab content shows. I think fixing the above problems will solve this problem, too.
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
Anyways, I'm a huge noob so the better the code you provide, the easier I can approve your answer as being correct. :)
Thanks!

You need to make your anchor tags hashable, that is, make them 'bookmarkable' for the front-end user. You seem to be on the way to creating your own tab plugin, but jQuery UI will do the hashing part for you. Here is a demonstration setting tabs up as you have mentioned:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
Here's the demo page -> http://muledesign.com/demo/tabs/default-tabs.html
Demo page with hashable link to tab -> http://muledesign.com/demo/tabs/default-tabs.html#movie
Re: point C) - Try using a lightbox plugin and attaching the lightbox plugins open/init function to the activate event on UI tabs -> http://api.jqueryui.com/tabs/#event-activate
I appreciate you may not want to use plugins, but you're already using jquery so meh.