将标签更改为手风琴 - 单击时折叠菜单不会折叠

Question

I am trying to create a tabbed menu that changes to an accordion menu on mobile screens. It is working, but the active accordion menu (button) does not collapse on the second click. It will only collapse if the other menu is clicked. I think the JS code to create that behaviour is not working. Only the media query for the CSS seems to be working.

I have tried using the using jQuery collapse and the window.matchMedia , but haven't been successful.

HTML

<div class="container"> 
<ul class="nav tabs">
  <li><a class="tab" href="#tab1">Tab 1</a></li>
  <li><a class="tab" href="#tab2">Tab 2</a></li>
</ul>

 <a class="accordion button" href="#tab1">Tab 1</a>
<div id="tab1" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
  <a class="accordion button"  href="#tab2">Tab 2</a>
  <div id="tab2" class="panel">
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

CSS

.container {
  margin: 5% 20%;
  background: #e5e5e5;
  padding: 30px;
  border-radius: 5px;
}

    .accordion { 
  display: none ; 
}
ul.nav {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        margin-bottom: 20px;
    }

    ul.nav a {
        padding: 10px;
        margin-right: 10px;
        float: left;
        display: block;
        margin: 15px 10px 0 0;
        cursor: pointer;
        padding: 10px 15px;
        line-height: 42px;
        border-bottom: 2px solid #888;
        background: #f7f7f7;
    }

    ul.nav a {
        color: #888;
        text-decoration: none;
        transition: all .3s ease-out;
    }

    ul.tabs a:hover {
        background: #37474f;
        border-bottom: solid 3px #009193;
        color: #fff;
    }

    ul.tabs a.selected {
        background: #37474f;
        border-bottom: solid 3px #009193;
        color: #fff;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    }

span a {
  color: #009193;
  text-decoration: none;
}


    @media screen and (max-width: 468px) {
    .tabs {
        display: none;
    }
  .accordion {
    display:block !important;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

  active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

}

}

JS

This is the only code that worked to deep-link tabbed content so that specific tabs open when hyperlinked to other pages.

    var target = null;
    var $panels = $('#panels');
    // collect all the tabs
    var tabs = $('.tab').on('click', function() {
        target = $(this.hash).removeAttr('id');
          if (location.hash === this.hash) {
            setTimeout(update, 0);
        }
    });
    var targets = tabs.map(function() {
        return this.hash;
    }).get();
    var panels = $(targets.join(',')).each(function() {
        $(this).data('old-id', this.id);
    });

    function update() {
        if (target) {
            target.attr('id', target.data('old-id'));
            target = null;
        }

        var hash = window.location.hash;
        if (targets.indexOf(hash) !== -1) {
            show(hash);
        }
    }

    function show(id) {
        if (!id) {
            id = targets[0];
        }
        tabs.removeClass('selected').filter(function() {
            return (this.hash === id);
        }).addClass('selected');
        panels.hide().filter(id).show();
    }
    $(window).on('hashchange', update);
    if (targets.indexOf(window.location.hash) !== -1) {
        update();
    } else {
        show();
    }

//For accordion
(function($){
  const mq = window.matchMedia("(max-width:500px)");
  mq.addListener(widthChange);
  widthChange(mq);

   function widthChange(mq) {
  var allPanels = $('.panel').hide();
     if (mq.matches) {
       $('.accordion').click(function()
          {
                    $(this).toggleClass( "toggle" ); 
                    allPanels.slideUp();
                    $(this).next('.panel').show();
                });    
     }

        } 
 // On load
  widthChange(mq);
});

I would like the accordion menus to toggle, open/close, when clicked.

Answer 1

Please check this according to me your mobile code is not working.

 if ($(window).width() >500) { var target = null; var $panels = $('#panels'); // collect all the tabs var tabs = $('.tab').on('click', function() { target = $(this.hash).removeAttr('id'); if (location.hash === this.hash) { setTimeout(update, 0); } }); var targets = tabs.map(function() { return this.hash; }).get(); var panels = $(targets.join(',')).each(function() { $(this).data('old-id', this.id); }); function update() { if (target) { target.attr('id', target.data('old-id')); target = null; } var hash = window.location.hash; if (targets.indexOf(hash) !== -1) { show(hash); } } function show(id) { if (!id) { id = targets[0]; } tabs.removeClass('selected').filter(function() { return (this.hash === id); }).addClass('selected'); panels.hide().filter(id).show(); } $(window).on('hashchange', update); if (targets.indexOf(window.location.hash) !== -1) { update(); } else { show(); } } else{ var allPanels = $('.panel').hide(); $('.accordion').click(function() { //alert("test"); $(this).toggleClass( "toggle" ); allPanels.slideUp(); $(this).next('.panel').show(); }); } 

 .container { margin: 5% 20%; background: #e5e5e5; padding: 30px; border-radius: 5px; } .accordion { display: none ; } ul.nav { margin: 0; padding: 0; list-style: none; overflow: hidden; margin-bottom: 20px; } ul.nav a { padding: 10px; margin-right: 10px; float: left; display: block; margin: 15px 10px 0 0; cursor: pointer; padding: 10px 15px; line-height: 42px; border-bottom: 2px solid #888; background: #f7f7f7; } ul.nav a { color: #888; text-decoration: none; transition: all .3s ease-out; } ul.tabs a:hover { background: #37474f; border-bottom: solid 3px #009193; color: #fff; } ul.tabs a.selected { background: #37474f; border-bottom: solid 3px #009193; color: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); } span a { color: #009193; text-decoration: none; } @media screen and (max-width: 468px) { .tabs { display: none; } .accordion { display:block !important; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; overflow: hidden; transition: max-height 0.2s ease-out; } } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <ul class="nav tabs"> <li><a class="tab" href="#tab1">Tab 1</a></li> <li><a class="tab" href="#tab2">Tab 2</a></li> </ul> <a class="accordion button" href="#tab1">Tab 1</a> <div id="tab1" class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <a class="accordion button" href="#tab2">Tab 2</a> <div id="tab2" class="panel"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>