Display specific content based on the click of the accordion tab in html and javascript

Question

I need some help in the accordion tab functionality where by I need to display the specific content of that accordion tab on the right side of the form. I have all accordion on the left side of the form.

Here is the code that I am working on HTML and JS:

$(document).ready(function() {
 // activate Nestable for list 1
        $('#nestable').nestable({
                group: 1
            })
            .on('change', updateOutput);


 // output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));

$('#nestable-menu').on('click', function(e) {
   var target = $(e.target),
   action = target.data('action');
   if (action === 'expand-all') {
       $('.dd').nestable('expandAll');
    }
  if (action === 'collapse-all') {
    $('.dd').nestable('collapseAll');
    $('.content:visible').slideUp();
   }
  });

$(function() {
   var nestablecount = 2;
   $('#appendnestable').click(function() {
       $('ol.outer').append('Drag
Item ' + nestablecount + '
Name
Add a DescriptionNow you know it ;)'
                );
      updateOutput($('#nestable').data('output', $('#nestable-output')));
      nestablecount++;
  });
        });
}
});

What i am seeking help is that on the nestable-output i need to show something like Clicked tab 1, if i clicked on the ITEM 1, and so on.

Here is the jsfiddle

Here is a reference that I want to achieve:

user_10606400 · Answer

You can write click event for li tag so when its click get data-id value and then using this show/hide divs where ids matches.

Demo Code:

$('#nestable').nestable({
  group: 1
})


$(function() {
  var nestablecount = 1;
  $('#appendnestable').click(function() {
    $('ol.outer').append('Drag
Item ' + nestablecount + '');
    //append this inside nestable op
    $("#nestable-output").append('Item ' + nestablecount + '
Name
Add a DescriptionNow you know it ;)')
    $("#c-" + nestablecount).hide() //hide them
    nestablecount++;
  });
});

//onclick of li tag
$(document).on('click', '.dd-item', function() {
  var ids = "c-" + $(this).data('id') //get data-id
  //show that div
  $('#nestable-output div.content').not($("#" + ids)).hide()
  $("#" + ids).toggle() //hide other


})

//on click of yes :
$(document).on("click", ".save", function() {
  //get values 
  var new_names = $(this).closest("form").find(".names").val();
  var counts = $(this).closest('form').find("div[name]").attr('name');
  if (new_names != "") {
    //change them
    $(this).closest('form').find("div[name]").text(new_names)
    $(".outer li[data-id=" + counts + "] .dd3-content").text(new_names)
  } else {
    $(this).closest("form").find(".names").focus();

  }
})

Display specific content based on the click of the accordion tab in html and javascript

1 Answers