div dissapears after i click on it-CodePudding

i made a accordion which seems to disappear every time i click on the arrow below is my code please assist i have made a fiddle for a better understanding

JS Fiddle

     $(document).ready(function() {
    $(document).on('click','.picto-accr', function (e) {
            let id_ = $(this).data("arcid");
             $(this).toggleClass('picto-open');
             // $('.table-container').toggleClass('picto-open');

             $("#" id_).slideToggle( "slow" );
             $('.table-container').toggle( "slow" );
         });
     });

 /*tabs*/
    #tabs_container{
        margin-top: -195px;
        width: 50%;
        margin-left: 239px;
    }

    .accr-button{
        border:1px solid  #adadad;
        padding:10px 20px;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 12px;
        color: #2b2b2b;
        letter-spacing: 0.1em;
        font-family: raleway,sans-serif;
        margin-bottom: 0!important;
        cursor: pointer;
        background-color:#e1e1e1;
    }

    .picto-accr{
        width: 20px;
        float: right;
        transform: rotate(90deg);
        margin-top: 1px;
    }
    .picto-open{
        transform:rotate(270deg);
    }
    .table-container{
        padding:50px;
        display:none;
        background-color:#e1e1e1;
        border-top:1px dotted #000;
        margin-top:20px;
        text-transform:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="biodate" class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" />
      <div class="table-container">

        test 1

      </div>
    </div>
    <div class="accr-button" id="course">Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" />
      <div class="table-container">
        test 2
      </div>
    </div>

Basically what I want to happen is for the div to stop disappearing and all it should do is collapse and expand.

CodePudding user response：

Your problem is the div should be not toggle as well and you are not pointing to accordion content specifically.

$(document).ready(function() {    
     $(document).on('click','.picto-accr', function (e) {
        let id_ = $(this).data("arcid");
         $(this).toggleClass('picto-open');
         // $('.table-container').toggleClass('picto-open');

         //$("#" id_).slideToggle( "slow" ); <-- comment this line
         $('#' id_  ' .table-container').toggle( "slow" ); <-- make it specific
     });
 });

CodePudding user response：

Well, with a little bit of inspecting you can easily find out that you are actually setting display: none to the div with id="biodate" and id="course"

For the HTML what you can do is

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" />
      <div class="table-container"  id="biodate">

        test 1

      </div>
    </div>
    <div class="accr-button" >Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" />
      <div class="table-container" id="course">
        test 2
      </div>
    </div>

And the jQuery

$(document).ready(function() {
$(document).on('click','.picto-accr', function (e) {
        let id_ = $(this).data("arcid");
         $(this).toggleClass('picto-open');
         // $('.table-container').toggleClass('picto-open');

         $("#" id_).slideToggle( "slow" );
     });
 });

And your accordion should be working fine now.