Responsive Web Design Content Sliders Using CSS, Attributes and jQuery

As you know, I’m working on a redesign of an existing website to make it responsive.  One of things this site has are lots of drop-down navigation options.  The drop-down options, however, go to anchor points on the page accessed by the main menu item.  In other words:

There is a page called “Programs” and on that page are sections: Group Fitness, Aquatics, Court Sports, Youth Programs, Specialty Programs.

I did some research into how responsive navigation is usually handled.  As I knew from visiting lots of sites on my own smartphone, the navigation is usually stacked:

(The menu items hide and show when the “Menu” item is clicked on) While we could make each of these menu items sliders to show the navigation, this fills up the screen super fast and means lots of clicks.  Instead we decided to hide content in boxes with headers.  Visitors can see all of the content headers at once and click to open it:

Remember, these just show in the smartphone view.  On a desktop visitors see this:

If you know CSS, changing the menu and subcontent headers is just a styling issue.  The menu bar is with CSS until the smartphone view is called and then the menu items and subcontent text is hidden.  With a tiny bit of  jQuery toggling the menu or the subcontent text to open or close is easy.  The really sexy trick I learned today is the plus and minus sign which gets added to the subcontent titles in the smartphone view:

This is achieved by adding an attribute to the title tag called “data-content”.  Here is what the markup looks like:

<h2 data-content=" +">First Subcontent</h2>

Because the default of the subcontent text is going to be closed, we want the plus sign to signal that it can be clicked on.  Next, we add the CSS:

.inner-title h2:after{content: attr(data-content);}

Here we are using the CSS pseudo-element “:after” to put some content after whatever is found inside the <h2> tag.  The content is being pulled from the attribute “data-content” of the tag itself!  So the content could be different from header to header, though here we just want plus or minus.  How do we achieve that?  With a bit of jQuery:

$(".inner-title").on('click',function(e){
   $(this).children('.inner-content').toggle();
   if($(this).children('h2').attr('data-content') == " +"){
      $(this).children('h2').addClass('change').attr('data-content',' -');
   }else{
      $(this).children('h2').removeClass('change').attr('data-content',' +');
   }
 });

I actually had a bit of trouble figuring this out, so let’s take it in parts:

$(".inner-title").on('click',function(e){

When someone clicks on a tag with the class of “inner-title”,

$(this).children('.inner-content').toggle();

any child tags with a class of “inner-content” will show if hidden or hidden if visible.  Then we look at the <h2> tag:

 if($(this).children('h2').attr('data-content') == " +"){

We want to check and see what attribute (a plus or minus) is currently showing and then change it to the opposite.  So, if the “plus” is showing, we change it to a “-” here:

  $(this).children('h2').attr('data-content',' -');

And this works well.  If you look at the underlying code, the attribute indeed changes but the change doesn’t actually appear in the CSS.  To force the CSS to refresh for the item we add a bogus class:

  $(this).children('h2').addClass('change').attr('data-content',' -');

And that little trick took me about an hour to figure out.  Now you and I know the trick!

Follow me

Submit a Comment