CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
NoSixties
NoSixties

Reputation: 2533

use accordion on two ul's

Currently I have 2 ul's that work together to show content. I created a example of the code here

However what I want to do is use the accordion effect like this

function checkWidth(){
        var windowsize = $window.width();
        if(windowsize < 769){
            $( function() {
                $( "#accordion" ).accordion({
                    collapsible: true
                });
            } );
        }
    }

when the screen size is smaller then 678px. So it should kinda look like it does here

However I have no clue how to achieve this with the way I currently set it up.

And I'm not able to change the way it's set up because it's already widely applied.

I hope someone is able to help me out!

Upvotes: 0

Views: 56

Answers (1)

Twisty
Twisty

Reputation: 30893

If I read this right, I think you're suggesting you cannot change the existing HTML, you can only effect the scripting. If that is the case, you can simply hide the elements you do not need.

Here is something that might work for you:

https://jsfiddle.net/Twisty/aqmejg16/

jQuery

jQuery(function() {
  var narrow = jQuery(window).width() < 678;
  if (narrow) {
    console.log("Narrow Window Found.");
    jQuery("#tabs").hide();
    jQuery("#tab").hide();
    var acc = jQuery("<div>", {
      id: "accord-1"
    });
    jQuery("#tabs li").each(function(key, elem) {
      acc.append("<h3>" + jQuery(elem).text() + "</h3>");
      acc.append("<div><p>" + jQuery("#tab li:eq(" + key + ")").html() + "</p></div>");
    });
    jQuery("#tabs").before(acc);
    acc.accordion({
      collapsible: true
    });
  } else {
    jQuery("ul#tabs li").click(function(e) {
      if (!jQuery(this).hasClass("active")) {
        var tabNum = jQuery(this).index();
        var nthChild = tabNum + 1;
        jQuery("ul#tabs li.active").removeClass("active");
        jQuery(this).addClass("active");
        jQuery("ul#tab li.active").removeClass("active");
        jQuery("ul#tab li:nth-child(" + nthChild + ")").addClass("active");
      }
    });
  }
});

To note, your original fiddle did not contain the jQuery UI Stylesheet, so I added that. Next I also added jQuery(function() { }); to ensure that the code runs once the page is ready.

First we check the width of the window. We can conditionally hide content and redraw what we want. I decided not to remove or replace them since the content is still applicable.

Create the containing div and iterate each of the tab elements to make headers and the tab content to make to content of each. Append all the elements to the document and then initialize accordian() on them.

Upvotes: 1

Related Questions