Wednesday, 12 October 2016

XML : Hide/show options leaving parent-node showing

checked out a few other questions here but they don't seem to relate to mine I need my query xml tag to continue to show whether hidden or not and when clicked on for it to show then hide again when clicked. I've contained the main xml needed, then the html and then the JQuery script:

  <questionBank title="How Much Do You Know About Sports?">  <question name="Sports Balls">      <picture>xml.jp</picture>      <details>          <query marks="3" bonus="yes">What sport uses an oval ball?</query>          <chapter>1</chapter>          <hint></hint>      </details>      <options>          <opt>Basketball</opt>          <opt>Football</opt>          <opt>Soccer</opt>          <opt>Baseball</opt>      </options>      <answer>          <correct>b</correct>          <description>All other are incorrect</description>      </answer>      <profile>This question shows the the size of a certain sports ball.</profile>  </question>    

Here's the html and script (don't mind the counts that is for something else:

      <!DOCTYPE HTML>      <html>      <head>      <meta charset="utf-8" />     <script type="text/javascript" src="jquery.js"></script>       <script>       var n=1;       $(document).ready(function() {       mycount=0;       $.ajax({      type: "GET",      url: "a1q3.xml",      dataType: "xml",      success:parseXML     });     });     function parseXML(xml) {    $("#main").append("<div class='namestyle'>" +                    $(xml).find("questionBank").attr("title") + "</div>");    $(xml).find("question").each(function() {        $("#main").append("<div class='namestyle1'>" + $(this).attr("name") + "</div><br>");          $("#main").append("<div class='bstyle'>" + $(this).find("query").text() + "</div><br>");        $(this).find("opt").each(function() {            $("#main").append($(this).text()+"<br>");        });          });   };      }      </script>     </head>     <body>    <section id="main"></section>     </body>   </html>    

Left out the css didn't think it was needed, just need to have the <'opts'> hidden and then when <'query'>/question is clicked the to show and vice versa (not just one tie as many as the user wants). Thanks.

No comments:

Post a Comment