JOHNMAC
5 months ago

dropdown menu isn't working fine in JQuery slider

Posted 5 months ago by JOHNMAC

I created jquery dropdown menu in slider. and added slide effect on dropdown menu like this https://ibb.co/QdRWqRy . If I click on one slide it opens but by clicking other slide the previousone close and then by clicking it again it opens, I need slide like this http://jsfiddle.net/Cq9Ky/19/ "without hover(i.e by click method)",

html code:

  <div class="carousel slide col-md-10 col-xs-12" data-ride="carousel" data-interval="false" id="myCarousel">
  </div>

jQuery Code:

    $('.create-meeting-btn').click(function(){
         $('.create-meeting-form').stop().slideToggle();   //stop or delay(1000)
     });

    $('.upcoming-btn').click(function(){
          $('.upcoming-table').stop().slideToggle(); 
    });

    $('.completed-btn').click(function(){
          $('.completed-table').stop().slideToggle();
    });

    $('#myCarousel').carousel({
        pause: true,
        interval: false,
    });


   function setMeetingCarausel() {
      let meetingsCopy = utils.setSliders(Array.from(meetings));

      let html = '<div class="carousel-inner no-padding">';

     meetingsCopy.map((meeting, index) => {
            html += `<div class="item ${index === 0 ? 'active' : ''}">`;
            meeting.map(m => {
            let className = m.status === 'completed' ? 'btn btn-warning btn-lg dashboard-icon' : 'btn btn-success   
          btn-lg dashboard-icon'
  html += `
        <div class="col-md-3 col-sm-6 col-xs-12" onclick="handleClickMeetingItem('${m._id}')">
            <span href="" class="${className}" style="width: 200px; height: 150px;">
            <p style="padding-top: 10px; font-size: 19px; font-weight: bold;">${m.subject}</p>
            <p style="padding-top: 12px; font-size: 19px; font-weight: bold;">${utils.convertDate(m.date)}</p>
            <p style="padding-top: 10px; font-size: 19px; font-weight: bold;">( ${m.status} )</p>
            </span>
        </div>
    `;
        });
      html += `</div>`;
   })
   html += `
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" style="margin-left:63px; color:grey;"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" style="margin-right:140px; color:grey;"></span>
      </a>
  `;

  $('#myCarousel').html(html);
  }

Please sign in or create an account to participate in this conversation.