We Keep Coding

Remove and re-add Class Attribute inside a <div> unordered list item

This is the answer as i was able to solve.
Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.
$(document).ready(function () {
//remove Class
$('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');
//need to do add it to List Item which has Id =3
//check the list item which has id =3 if so add the class to it
// It is not a button click event.
$('#myJSTree li').each(function (i, li) {
console.log('<li> id =' + $(li).attr('id'));
var myIdVal = $(li).attr('id');
if (myIdVal == 3) {
$(this).addClass('jsTree-clicked');
}
});
});
.jsTree-clicked { background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked" . When you navigate to a different node it will remove and re-add the same class to the navigated node.
Expected
I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div.
AND
Re-add [class="jsTree-clicked"] to any ListItem by passing the Key i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.

$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>

Maybe this is helpful to you?
$(function () { $('#myJSTree').jstree(); });
const toggle = (e) => {
if (+$("#test").val()>=10 ) {
e.target.classList.remove("jstree-clicked");
console.log("You entered an invalid number.")
}
console.log(e.target)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10
I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.
It appears to me as if the class jstree-clicked (not: jsTree-clicked) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.
The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:
$(function () { $('#myJSTree').jstree(); });
const checkinput = (e) => {
if (+$("#test").val()>=10 ) {
console.log("You entered an invalid number.")
} else document.location.href=e.target.href;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.

AngularJS functions not applying after javascript load?

I have a page where I'm using javascript load() to inject a particular div element from another page:
setTimeout(function(){
function showPattern(patternId, page_url) {
var patternstuff = $(patternId).load(page_url + " .pattern-markup");
return patternstuff;
}
showPattern("#tabsOpen .pattern", "individuals/tabs-open/index.html");
}, 200);
with a timeout, otherwise the html won't load and render.
I'm using AngularJS on the tabs that I am bringing in:
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li class="active" ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
However, when the page renders, the Angular isn't working and all of the tab-content divs are showing. The Angular tabs controller is here:
app.controller("PanelController", function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
The Angular tabs are working fine on the individual page I am pulling them from. Both that page, and this page I am loading them into have the same ng-app="manual" attribute on the surrounding element. Here is the individual HTML page I am drawing the tabs HTML from:
<!doctype html>
<html lang="en" ng-app="manual">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/patterns.css">
<script src="../../assets/js/angular.min.js"></script>
<script src="../../assets/js/app.js"></script>
</head>
<body>
<!-- Tabs -->
<div class="pattern-markup">
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
</div>
<!-- End Tabs -->
</body>
</html>
Do I need to reinitialize AngularJS somehow, after the HTML is loaded by javascript, for Angular to recognize the tabs and make them work?

I wonder if the reference to the value of this inside selectTab and isSelected is creating issues. Try the following code in controller,
app.controller("PanelController", function() {
var panel = this;
panel.tab = 1;
panel.selectTab = function(setTab) {
panel.tab = setTab;
};
panel.isSelected = function(checkTab) {
return panel.tab === checkTab;
};
});

Using Jquery to toggle class based on menu item clicked

Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});

Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle

Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>

Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.

Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example

const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle

Parallax next and previous navigation

At the moment for my parallax site i have next and previous buttons on each section. I would like to just have one set of prev/next navigation that will go to each section.
Can you advise me on whitch route to go down please?
html:
<head>
<title>The history of aeronautics</title>
<meta charset="utf-8" />
<meta name="description" content="A parallax scrolling experiment using jQuery" />
<link rel="stylesheet" media="all" href="css/main.css" />
<script src="js/modernizr.custom.37797.js"></script>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="js/parallax.js"></script>
</head>
<body>
<div id="wrapper">
<div id="car"><img src="images/car.png"></div>
<nav id="primary">
<ul>
<li>
<h1>Hospital</h1>
<a class="hospital" href="#hospital">View</a>
</li>
<li>
<h1>University</h1>
<a class="university" href="#university">View</a>
</li>
<li>
<h1>Health Centre</h1>
<a class="health-centre" href="#health-centre">View</a>
</li>
<li>
<h1>Horiba HQ</h1>
<a class="horiba-hq" href="#horiba-hq">View</a>
</li>
<li>
<h1>Entertainment Hub</h1>
<a class="entertainment-hub" href="#entertainment-hub">View</a>
</li>
<li>
<h1>Vet</h1>
<a class="vet" href="#vet">View</a>
</li>
<li>
<h1>General Hospital</h1>
<a class="general-hospital" href="#general-hospital">View</a>
</li>
</ul>
</nav>
<div id="content">
<article id="hospital">
<img src="images/image1.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="university" href="#university">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="university">
<img src="images/image2.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="hospital" href="#hospital">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="health-centre">
<img src="images/image3.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="university" href="#university">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="horiba-hq">
<img src="images/image4.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="entertainment-hub">
<img src="images/image5.png" />
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="vet" href="#vet">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="vet">
<img src="images/image6.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="general-hospital" href="#general-hospital">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="general-hospital">
<img src="images/hospital.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="vet" href="#vet">Prev</a></h3>
</div>
</div>
</li>
</ul>
</article>
</div>
<!-- Parallax foreground -->
<div id="parallax-bg3">
</div>
<!-- Parallax midground clouds -->
<div id="parallax-bg2">
<img id="bg2-1" src="images/blurred-buildings.png" />
</div>
<!-- Parallax background clouds -->
<div id="parallax-bg1">
<img id="bg1-1" src="images/clouds.png" />
</div>
</div>
</body>
js:
$(document).ready(function() {
redrawDotNav();
/* Scroll event handler */
$(window).bind('scroll',function(e){
parallaxScroll();
redrawDotNav();
});
/* Next/prev and primary nav btn click handlers */
$('a.hospital').click(function(){
$('html, body').animate({
scrollTop:0
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.university').click(function(){
$('html, body').animate({
scrollTop:1500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.health-centre').click(function(){
$('html, body').animate({
scrollTop:3800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.horiba-hq').click(function(){
$('html, body').animate({
scrollTop:5500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.entertainment-hub').click(function(){
$('html, body').animate({
scrollTop:6800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.vet').click(function(){
$('html, body').animate({
scrollTop:7700
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.general-hospital').click(function(){
$('html, body').animate({
scrollTop:11000
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
function () {
$(this).prev('h1').show();
},
function () {
$(this).prev('h1').hide();
}
);
});
/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#content').css('left',(0-(scrolled*.9))+'px');
$('#parallax-bg1').css('left',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('left',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('left',(0-(scrolled*.9))+'px');
}
/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#university').offset().left + 1000;
var section3Top = $('#health-centre').offset().left +3000;
var section4Top = $('#horiba-hq').offset().left +4000;
var section5Top = $('#entertainment-hub').offset().left +6000;
var section6Top = $('#vet').offset().left +6800;
var section7Top = $('#general-hospital').offset().left +9100;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.hospital').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.university').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.health-centre').addClass('active');
} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
$('nav#primary a.horiba-hq').addClass('active');
} else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
$('nav#primary a.entertainment-hub').addClass('active');
} else if ($(document).scrollTop() >= section6Top && $(document).scrollTop() < section7Top){
$('nav#primary a.vet').addClass('active');
} else if ($(document).scrollTop() >= section7Top){
$('nav#primary a.general-hospital').addClass('active');
}
}
I have tried adding this which can be seen here but it doesnt click through to the next section
js used:
$(function() {
var $tabs = $('#content').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
Sorry about long post wanted to give as much info as possible
Thanks

You didn't insert anchor tag in href next page, you need to add it for each section of page, then automatically will go to next or previous page by clicking on that.. cause you just insert (#) so thats why nothing happened...

how to manipulate ul brackets

hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file:
<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
<div id="container">
<div id="content">
<div id="sidebar">
<ul id="accordion">
<li>
Unit 1
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion">
<li> Chapter 2
<ul id="accordion">
<li> Lesson 1 </li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
My acorjs.js file:
$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Any ideas??
My new edited file :
<div id="container">
<div id="content">
<div id="sidebar">
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
my JS file :
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Please help everything stopped working

Try giving the ul elements unique ids. The ul for both Units and Chapters have "accordion" as the id. If the ids are not unique, the event function may be bound only to the first or last, but not all
Alternately, make "accordion" a class and not an id. Your jquery will then need to change to use "ul.accordion" instead of "ul#accordion".
Here's a snippet of the HTML showing the change:
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
And then the change to the javascript code:
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});