is there a way to display the dropdown content only when clicked instead of displaying all of the content on the run and adding more html lines?

like make an onclick attrib on the button and put a function inside??

var data = [{
  "id": 104,
  "note": "[\"copyright striked\"]",
  "status_color": "primary"
}, {
  "id": 49,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 105,
  "note": "[\"officially translated\"]",
  "status_color": "secondary"
}, {
  "id": 43,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 48,
  "note": "[\"Waiting for after credits\"]",
  "status_color": "warning"
}];

// console.log(data);
for (let row of data) {
  let uid = row.id;
  let notes = row.note;
  let color = row.status_color;

  $('#collection').append(html_card(uid, notes, color));
} //end of for-loop


function html_card(id, notes, color) {
  let append = '';
  append  = '<div >';
  if (notes != '[]') {
    append  = '<div >';
    append  = '<button ';
    append  = ' role="button" data-toggle="dropdown" aria-expanded="false">';
    append  = 'See Notes<span ></span></button>';
    append  = '<ul >';
    for (let note of JSON.parse(notes)) {
      append  = '<li >&raquo; '   note   '</li>';
    }
    append  = '</ul>';
    append  = '</div>';
  }
  append  = '</div>';
  return append;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div id="collection" class='row justify-content-center px-2 my-3'></div>

note: i wanna make a very compact design and the dropdown is the only work around that i can see in bootstrap

here's the JSFiddle

CodePudding user response：

Do you mean something like this :

var data = [{
  "id": 104,
  "note": "[\"copyright striked\", \"copyright v2\"]",
  "status_color": "primary"
}, {
  "id": 49,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 105,
  "note": "[\"officially translated\"]",
  "status_color": "secondary"
}, {
  "id": 43,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 48,
  "note": "[\"Waiting for after credits\"]",
  "status_color": "warning"
}];

//console.log(data);
for (let row of data) {
  let uid = row.id;
  let notes = row.note;
  let color = row.status_color;

  $('#collection').append(html_card(uid, notes, color));
} //end of for-loop


function html_card(id, notes, color) {
  let append = '';
  if (notes != '[]') {
    append  = '<div >';
    append  = '<button id='   id   ' ';
    append  = ` role="button" data-toggle="dropdown" 
                    onClick="getNotes(&apos;`   encodeURIComponent(JSON.stringify(notes))   `&apos; , `   id   `);
            " aria-expanded="false">`;
    append  = 'See Notes<span ></span></button>';
    append  = '<ul >';
    append  = '</ul>';
    append  = '</div>';
  }
  return append;
}

function getNotes(notes, _this) {
if($("#"   _this).parent().find(".dropdown-menu").html() === '')
  for (let note of JSON.parse(JSON.parse(decodeURIComponent(notes)))) {
    $("#"   _this).parent().find(".dropdown-menu")
      .append('<li >&raquo; '   note   '</li>')
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div id="collection" class='row justify-content-center px-2 my-3'></div>

I hope this helps