JOHNMAC
7 months ago

jsfiddle example of jQuery isn't applying on jQuery code

Posted 7 months ago by JOHNMAC

I created jquery dropdown menu in slider. and wants to change its view state like ""https://jsfiddle.net/user23435/tzrunfjd/1/"" and i 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,,,,,,,,How can i apply this https://jsfiddle.net/user23435/tzrunfjd/1/ into my code which is given below

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.