Yes, there are a lot of front-end frameworks that are available for use in WordPress development, and no I wouldn’t say I have a favorite (though I tend to use Bootstrap or Foundation for most of my work, at this time).
At the time of this writing, I’m currently working on a project in which I’m using Bootstrap 3.3.5 to handle the front-end.
Part of the project calls for use of the tab functionality in such a way that you can, y’know, tab through several panes of information without actually leaving the page.
If you’ve ever used Bootstrap, you know it’s easy to setup and integrate into a project; however, if you’re looking to introduce more complicated functionality such as having to make asynchronous requests whenever the pages tabs change and then you need to update the DOM accordingly, it can actually be a little frustrating in nature.
Sure, there are some ways in which you can track which tab is active – class names, using hidden fields, etc., but depending on how you’ve architected the front-end and what’s happening with the Ajax response, you may actually end up with needing to do something a little more advanced than that.
But when it comes to needing to handle when a tab has been changed to toggle a pane in Bootstrap, what event do we use? again hanks
Tab Events in Bootstrap
To make this example as general as possible (so that it’s hopefully as applicable as possible).
1. Navigation Tabs
I’m assuming that you have your navigation setup in such a way that your markup looks something like this:
In the markup above, I’ve got a simple unordered list of three tabs the first of which is
active as denoted by its classname. This will create a list of navigation options:
The first of which will be marked as
active and the others that will be marked as
active when clicked and then will trigger a pane of content to change on the page.
2. Listening For Tab Events
href attribute of the anchor when it has been clicked.
Ultimately, this is going to be the way that we can respond to the event, but more on that in a moment.
Notice that I’m listening for the
change, and so on.
This event is no different except in the fact that it’s related specifically to Bootstrap. This way, we’re able to setup a listener that will respond whenever this event is fired. You can find more about this particular event on this page in the documentation
Why Are You Reading Attributes?
Note that at this point you may be asking why I’ve opted to read the
href attribute versus the text.
In the example above, the text is the same as the
href attribute so, really, either would be fine; however, when you’re working with tabs in Bootstrap, the
href attribute will correspond to the tab pane that will be displayed when the anchor is clicked.
As such, it’s normally safer to read the value of that attribute than the text; the text can be anything but the
href attribute must be tied to the tab pane that will be displayed.
3. Responding To The Event
Really, this is up to you – for some, you may just want to toggle the visibility of another element of change the next of something else.
For others, you may want to do something more complicated like get more involved with the DOM, initiate some type of Ajax request, and so on. Obviously, there’s no way for me to know.
But one of the biggest tips that I can provide is make sure that if you’re going to be doing something complicated or even something that may be called elsewhere in the code is to abstract the functionality into it’s own function.
So for the purposes of rounding out this example, let’s say that you want to want to initiate an Ajax request that will toggle the display of the an element based on the request’s response.
Sure, it’s a little contrived but it demonstrates the point:
In short, an Ajax request is made to a server-side function,
acme_should_toggle_element based on the specified
anchor as set when its clicked. Then the response is sent back to the client and it will decide whether or not to take care of the toggling the element.
General Solutions For Specific Problems
It can be difficult to write up posts like this because the nuances that exist from project to project, but the goal is to show a general process for how you can go about doing the same using:
- A given framework
- A set of pre-defined events
- WordPress’ built-in Ajax framework
- And how to tie it all together
No, it’s not necessarily going to how to show you exactly how to do whatever it is that you need to do, but this should provide enough information through the examples to give you a skeleton of what’s needed to achieve what it is that you do need should you face a similar problem.
Managing Tab Events in Bootstrap 3 was written by Tom. Check out additional articles on the blog at Tom McFarlin.
Read more here:: Managing Tab Events in Bootstrap 3