I am using php to get items from a database and generate a html-table to list each item.
To the left of the html-table I have a side-menu with a accordion-function made in javascript.
Inside of each accordion there are links for various search-parameters for sorting the table. For example a link to each Genre.
If I click on one of the accordions, for example "All Genres A-Z", it expands and lists all the genres. But if I then click on one of the links WITHIN the accordion, the page resets naturally and the accordion closes because the page reloads (with the new search parameters).
My accordion is based out of the following question: How to make accordion stay open, But since all my links are search parameters that leads to the same page (browse.php) I cannot use the same solution that was presented in that question.
- Is there a way to keep the selected accordion open even after clicking on one of the links within it?
Here is a good example of how I want it to behave (The menu on the left) 47Admin bootstrap theme
The js:
$('.trigger-button').click(function() {
$(".trigger-button").removeClass("active")
$('.accordion').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).next().slideDown('normal');
$(this).addClass("active");
}
});
$('.accordion').hide();
The html on browse.php:
<div class='trigger-button'>Favorite Genres</div>
<div class='accordion'>
<ul>
<li><a href='browse.php&genre=drama'>Drama</a></li>
</ul>
</div>
<div class='trigger-button'>All Genres A-Z</div>
<div class='accordion'>
<ul>
<li><a href='browse.php&genre=drama'>Drama</a></li>
<li><a href='browse.php&genre=thriller'>Thriller</a></li>
</ul>
</div>
Link to the fiddle used in the other question
I assumed that you meant link for List One and List Two. Then here is your fiddle
EDIT:
In General page reload reset all state in javascript. Basically you have to do reverse operation in page load
Pick url in address bar.
Match with href attribute in anchor tag.
Then expand respective accordion.
And you can do it in PHP code as well by setting classes in element which you want to open. However, I feel handling this in PHP bit noisy.
Hope following fiddle give some idea to you
Related
I have little to no JavaScript experience, so if someone could help me with this I'd very much appreciate it...
I'm trying to create a responsive menu, but can't seem to figure out how to get the menu to "close" (when in its responsive state) once a menu item has been clicked.
Here is the tutorial I'm using: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Also, in the menu's un-responsive state, I'd like the menu items to stay highlighted after being clicked (so the user knows which tab is active).
Can anyone help me with this? Thanks in advance!
You could add a myFunction() call to the onclick handler of the A tags to be executed upon clicking on the links as the following:
<ul class="topnav">
<li><a class="active" href="#home" onclick="myFunction()">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
See demo here: http://jsbin.com/lafepitopu/edit?html,output
The menu looks like it works. The href attributes of your list items don't actually link to anywhere because it's a demo. Create another page with the same code, change your content and link to it from your original page. You'll see the menu collapse upon redirecting to the location specified in your href.
If you want to keep a tab highlighted, change it's respective list item class to class="active".
I have an accordion with 17 sections that contains crosslinks to other sections. Pre-Bootstrap, this worked with some paragraph IDs and java to open the item.
On clicking a link in one section, the user jumped to another section which expanded.
Is it possible to replicate this using Twitter's Bootstrap (3.0)?
I've seen a few questions similar to this but with no responses!
You don't need link to do that.
1) define classes for your <a> tag.
e.g: <a class="goToTab1">go to tab 1</a>
2) trigger the event when users click your <a class="goToTab1">go to tab 1</a>
$(".goToTab1").onclick(function(){
$("#tab1").trigger("click");
}
Situation
As you can see in the screenshot below, I have an area of my site which makes use of tabs to split up the user dashboard. The tab indexes along the top are declared as URLs and as a result jQuery creates the references at runtime. I would like the user to be able to click the "here for free content" link and the system calls the Free content tab. Let's call that URL "testserver/user/free-content" for the moment
Issue
Now, I know how to programmatically deal with this situation when the tabs are declared on page as divs and have static IDs I may assign but, in this case, am not ashamed to say it has me a little stuck before I've even started.
If I set an ID on the link, jQuery will overwrite it so, I can't use that approach.
Start of solution
What I'm thinking of is the following, sorry that for the moment, I don't have a fiddle, as/if I progress, I'll update the question.
User clicks the link and jQuery picks up the event by checking if it hasClass('tab-url-call')
Temporarily save the URL attribute
Loop through the tab index
Check if URL attribute matches the temp stored
If matching call this tab
This bit has me at an end of what to do
Next
Update - Extra information
As requested, here is some HTML to demonstrate the current structure
<div id="user-tabs" class="tabs">
<ul>
<li>
Welcome
</li>
<li>
Free content
</li>
<li>
Learning
</li>
</ul>
<div id="tab-user-home">
<h3>You current have freen content "showing"</h3>
<p>
This is just an information box to highlight that the user has an
option set to show free content and inform them that they can
reach it via the tab controls or click
<a
class="tab-url-call"
href="testserver/user/free-content"
>
here for free content
</a>
</p>
</div>
</div>
Thank you for taking the time to read my question.
In abstract what you are looking for is
//register a click event handler for elements with class tab-url-call
$(document).on('click', '.tab-url-call', function(e){
e.preventDefault();
//you need to place the selector for the tab header element here
//find the anchor element with the same href as the clicked element which is inside the tab header element
$('tabheader').find('a[href="' + $(this).attr('href') + '"]').click();
})
Before anything, I don't know if I'm taking the right approach to this so bear with me on this.
My problem is as follows: I'm trying to use an accordion where each tab is a category and when expanded, the accordion shows the artists in that category. So far, so good.
Now, the other part of what I'm trying to achieve is this: Once I click on the tab (which has a "#" link) I need to display the artists list in a div, which I was planning to do with AJAX. I can do this without problems if the link was INSIDE the accordion contents (for example, if I wanted to click on an artist) but can't figure out how to make it work when clicking a tab.
My code is as follows:
<li class="artistlist">
Photo
<ul>
<li>Artist</li>
<li>Artist</li>
<li>Artist</li>
</ul>
</li>
</ul>
<div id="contentbox">
<div id="artistcat">
</div>
</div><!-- /contentbox -->
and what I'm trying to do is the following: replace href=# with something like this:
Abstrakt
thus, when clicking on a category (for example "photo") it expands the accordion (which it does) AND shows the content in the ajax box, which is exactly the same content of the accordion only with thumbnails.
So basically, I need to make that tab link do 2 actions: 1) expand the accordion and 2) show the ajax content.
I'm thinking that perhaps the AJAX solution is the wrong way, either way, any help will be greatly appreciated.
Try to use jQuery, and make a little piece of code that does what you need to.
Like
$('#contentbox').click( function() {
$('#content').ajax( /* do ajax stuff */ );
// animate accordion
});
If you can, use jQuery or some other library.
Use observers to trap click events. This way you seperate your html from your javascript.
use to do the ajax requests => you can do multiple things "on succeed" and
throw clean errors when the ajax requests fail.
your library will also give you the tools to trigger multiple observers "onClick"
I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/
You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');
I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/