some issues with bootstrap nav menu - php

Question

I found some examples on bootstrap side and top navigation. I got it work almost as I would like to, but there are some things I can't make it work:
Here is jsFiddle of a working example.
1) How to add active class to a clicked item in the menu and remove active class from the one before?
2) How to change icon to down-arrow when expanding Menu and when closing back to left-arrow?
3) All examples which I found on the internet with admin panels similar to this one had independent pages. So if someone click Menu Item it loaded Head, body section and all the scripts again, so I decided to create one file with top and left navigation and only load content on menu item click like:
$(".side-nav a").click(function(e) {
e.preventDefault();
$("#page-wrapper").load($(this).attr("href")); //some filename.php
});
is this the right way to do it? (I noticed that I had to remove my .htaccess with Order deny,allow Deny from all)

Answer 1

For your first question, you should get from your php code the current page and compare it to the clicked link (a), so then you can check on the page load what link is active. if it is a one page with sections and each item is just pass the user to the anchor (of the item id) -> You should fix the code to be nicely, sorry, i have no time to make more then this now :(
$('.side-nav').on('click', function(e){
$('a').removeClass('active');
$(e.target).addClass('active');});
For your second question use the following css
[aria-expanded="false"] > i.fa-caret-left { transform: rotate(0deg); transition: all ease-in-out .4s; }
[aria-expanded="true"] > i.fa-caret-left{ transform: rotate(-90deg); transition: all ease-in-out .4s;}
For your third question, i'm not sure i understand what you try to do.
If i guess true, you are trying to inject "html" inside #wrapper element?
If so, yes, you can do so.
If you want to redirect to $(this).attr("href") link value, you should write it like this:
location.href = $(this).attr("href");
Hope i helped you.