How can create toggleable divs using javascript's innerhtml function?

Question

I am trying to import information from an XML file, and create a name which, when clicked, will show more information. This information will be inside a div with no display until the header has been clicked.

This is the idea. Doesn't work.

$(document).ready(function () {
    $.ajax({
        type: "Get",
        dataType: "xml",
        url: 'service.xml',
        success: function (xml) {
            $(xml).find('Service[Name="j1979"]').find("Define").each(function () {

                var PID = $(this).attr("PID");
                var name = $(this).find("Name").text();
                var source = $(this).find("source").text();
                var doffset = $(this).find("DOffset").text();
                var type = $(this).find("Type").text();
                var length = $(this).find("Lenght").text();
                var scale = $(this).find("Scale").text();
                var noffset = $(this).find("NOffset").text();
                var units = $(this).find("Units").text();

                var moreinfo = "<div id='moreinfo'>source += '\r\n' += doffset += '\r\n' += type += '\r\n' += length += '\r\n' += scale += '\r\n' += noffset += '\r\n' += units</div>";

                document.getElementById("j1979").innerHTML += PID += " ";
                document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";

                document.getElementById("j1979").innerHTML += moreinfo;
            });
        }
    });
});

Sorry for any obvious mistakes and/or ugly code.

Answer 1

From the code you have, you can use '+' operator to concatenate strings.

When you need to use single quote inside string defined with single quote, you can use backslash (\) as escape character before it.

Also, you need to hide the div with class "moreinfo" initially.

As for new line, if you want each attribute in new line in moreinfo class, it can be achieved by using HTML "pre" tag or "br" tag or some other way.

So code would be:

var moreinfo = "<pre id='moreinfo' style='display:none'> source = " + source + "\r\n doffset = " + doffset + "\r\n type = " + type + "\r\n length = " + length + "\r\n scale = " + scale + "\r\n noffset = " + noffset + "\r\n units = " + units +"</pre>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

or

var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

If you want to toggle display on click, you can use ternary operator to give condition in onclick function:

var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display == \'inline-block\' ? document.getElementById(\'moreinfo\').style.display = \'none\' : document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

Answer 2

I wrote a program where I needed to toggle a div with javascript. I found a solution with this code.

function toggle( selector ) {
  var nodes = document.querySelectorAll( selector ),
      node,
      styleProperty = function(a, b) {
        return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
      };

  [].forEach.call(nodes, function( a, b ) {
    node = a;

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
  });

You can then call the function with:

toggle('.idOrClass');

make sure you use single quotes around the class or id name

Hope this helps! :)

Answer 3

I assume that this is what you want to achieve: DEMO

just assume that the script in the demo is inside the success function

first, you have some error in here

document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";

this will not add the p element to the element with id j1979 because you write it like that, where you should be writing it like this

document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\" ></p>";

note the quotes at start and end, and the closing tag

second, there's no word or anything inside the p element that indicates that you could click it to show more information, so put the PID inside the p like this

document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";

here's the full code with some CSS style to hide it before the user click on the PID

$(document).ready(function () {
    var PID = "testPID";
    var name = "Random Name";
    var source = "Google";
    var doffset = "1000";
    var type = "A-9001";
    var length = "50CM";
    var scale = "100";
    var noffset = "0";
    var units = "Some Units";

    var moreinfo = "<div id='moreinfo'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";

    document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";

    document.getElementById("j1979").innerHTML += moreinfo;
});

#moreinfo {
    display: none;
}
#j1979 {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="j1979"></div>