We Keep Coding

How to reuse my code for opening Accordions on click

I'm currently using the following JS to open an accordion when an <a> tag is clicked. It uses the data-trigger value to determine what <a> to use.
<script type="text/javascript">
$('[data-trigger="accordion"]').on('click', function(e) {
var obj = $(this),
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $('.content.1', '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
});
</script>
This above JS will open an accordion based on it's class. Below is an example of the link that is used to open the Accordion:
<a href="#protect-the-nhs" data-trigger="accordion">
An example of the code that it is referencing to open the accordion:
<div id="protect-the-nhs" class="content 1">
I was wondering if anyone can help me change this code so that I can reuse it for each Accordion on the page. Let me explain. The page has 5 different accordions, above I have used generic naming for the data-trigger and the accordion class "content 1".
I'd like to know if it is possible to somehow make it so I can use this code for each different accordion (So for example accordion 1 would have a class of "content 1", accordion 2 would have a class of "content 2" etc. However, for each accordion, there would also be a different link you have to click to open the accordion.
For example: Accordion one would rely on an <a> tag with data-trigger="accordion1" and it would open the accordion with class="content 1".
I hope someone understands my ask and might be able to help! I've tried looking for something for this but haven't found anything. I'm still learning JS so TIA.
Thanks.

My basic idea is to listen to the entire document, determine where got clicked and activate the correct accordion
PLEASE NOTE: I'm assuming that every accordion has a number right after it that corresponds to the content classes like accordion1 content 1
document.onclick=function(e) {
if(!e.path[0].dataset.trigger){return;} //i forgot that not every element has a data-trigger
if(!e.path[0].dataset.trigger.startsWith('accordion')){return;} //listening to the whole document needs you have to ensure you aren't activating when you don't need to
var n=e.path[0]["data-trigger"].split('accordion')[1]
alert(n)
var obj = e.path[0],
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $(`.content.${n}`, '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
}

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

how to scroll to an anchor point with smooth animation adobe edge

I can't find this seemingly simple answer. I am trying to make an animated button on my site scroll to an anchor point on my site(it's just one huge page)
The code I currently have in the code snippet box in edge doesn't work. It's kind of frustrating because with edge you're not entirely sure where your code is being thrown into the end result.
// insert code for mouse click here
window.scrollTo(0,0);
//want it to scroll to #Main
most of the code in edge starts you off with:
sys.someAction()
Here's my site if you want to look at what I'm trying to do:
www.daniellachman.com
Thanks!
Edit: Here is the full code snippet, provided with the code supplied below:
//Edge binding end
//CUSTOM CODE FROM Monty82
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
//Edge binding end
//Original Mouse Clicking Function Provided by Edge
Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
// insert code for mouse click here
//Stuff I added to call custom function above
sym.scrollToTag("main")
});
It didn't work. But I feel like I'm on the right track.
www.daniellachman.com
If anyone knows how to look at the javascript for the menu nav buttons "about" "contact" and see what that is referencing for the scroll. I'd love to hear it.

This function in JavaScript/jQuery may help you:
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
The parameter is the name (not the id but the name) of the anchor to which you want to scroll.
Notice that the function is designed for vertical scrolling, your site seems to require vertical and horizontal, so you may need to use scrollLeft too.

Javascript not working - 2 different div containers

I am struggling with trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container...
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much...So, if you could simply take a look at the demo above, it might be easier on the eyes ;)
JAVASCRIPT:
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});

Did you mean this?
$('.info_box p a').click(function () {
var id = this.id; //get the id of the clicked item
var a = $('#profile_list a[href="#' + id +'"]'); //construct the selector to select the menu item which has the same href
$('#profile_list a').not(a.addClass('active')).removeClass('active'); //now do the add/remove class
});
Fiddle

I did this and it worked. I hope it is what you're looking for:
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a.panel[href=' + $(this).attr('href') + ']').addClass('active');
});
jsFiddle

History.js replaces the wrong content

I have the following initiation in my JavaScript; I’m always using the code shown in github by the way. The full code can be seen here
var
/* Application Specific Variables */
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
activeClass = 'active selected current youarehere open',
activeSelector = '.active,.selected,.current,.youarehere, .open',
menuChildrenSelector = '> li,> ul > li',
/* Application Generic Variables */
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
The problem lies in :
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
and in:
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
When the menu clicked in .nav, has to change the .page-content.
When the menu is clicked in .nav-sub, the content has to be replaced in .tab-content
The problem is, both menu's change .page-content, instead of just either tab-content or page-content.
Any idea how to change this?

Fix your content select
Change from
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first'
TO
contentSelector = '.tab-content, .page-content, .article:first, .post:first'

History.js isn't replacing the wrong content; ajaxify-html5.js (the script you are using) is doing exactly as it was designed:
If the user clicks on an internal link (and the link does not have the no-ajaxy class), then the script intercepts the click, stops the browser from loading the page, and initiates an Ajax request for the page.
Note that this includes all internal links on the page, not just ones in the menu.
When the Ajax request is complete, the script replaces the content on the current page with the content from the response (and does some other clever things like set the activeClass on the right menu item, update the page title and run scripts from the response).
The script uses the first element found with contentSelector as the "content" node. This does not depend on which link the user clicked on.
If you want to "ajaxify" only menu links, you can change (line 95):
$body.ajaxify();
to call .ajaxify() on your menu element instead.
If you want to update a different element with the new content, you can change (line 145):
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */
to update another element instead.