Twitter Bootstrap accordion jump to section and open - javascript

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");
}

Related

Bootstrap dropdown toggling wrong element if a href contains id of existing element, is it a bug?

I have a dropdown menu that is usable even without JS enabled. For that I've created a copy of the menu in the footer with all submenus opened and added <a name="nojs-menu"></a> on top of that menu and have first level of the main menu point to that anchor: <a href="#nojs-menu" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">. This way whenever JS wasn't executed my main menu will just drop users to the footer where all submenus are opened.
Now, HTML5 validator recommends replacing name attributes with id. But as soon as I do that dropdown menus stop working because they toggle open class not on submenu but on the anchor with id nojs-menu. Is it a bug or did I misunderstood something?
Bootstrap version in 3.3.5.
In this case all submenu items need an id and this ids must be in data-targets of top menu buttons.

How do I "close" this responsive dropdown menu after clicking a menu item?

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".

JS Accordion to stay open while clicking links

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

Is there any option without anchor link when use multiple page?

I'm use Jquery Mobile and there is 3 page. I need user open the page by his app and share the link to his friends.
But If I use the link way, like:
<!-- this is a second page -->
<div data-role="page" id="secondPage"><div/>
<!-- this is navigator from first page -->
<div><a href="#secondPage" >secondPage</a></div>
If I click the link, it will navigate to second page, but it will also change the website link address(add #secondPage). then if user share the address , the second page will display every time his friends open it.
So Is there any way to replace the anchor link way? or resolved this problem?
Thank.
I copied and pasted this solution from: Remove querystring from URL
var testURL = '/Products/List#discounted?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.split('#')[0].split('?')[0]; // Returns: "/Products/List"
This was the winner among the other alternatives.

jQuery tabs programmatically call a URL based tab from within code

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();
})

Categories

Resources