title: How to open child node on click of parent
body: <p>I'm having a jstree(version 3.0.0). I have generated the tree with json. The tree is one level deep. It looks something like</p>
  
  <ul>
  <li>Parent1
  
  <ul>
  <li>Child1</li>
  <li>Child2</li>
  </ul></li>
  <li>Parent2
  
  <ul>
  <li>Child3</li>
  <li>Child4</li>
  </ul></li>
  </ul>
  
  <p>If I click on each child, it's corresponding information is shown.</p>
  
  <p>Problem:
  I have no content to display for parent. So if i click on parent , its first child should automatically be selected. Is there any way to do this? </p>
  
  <p>Eg: If <code>Parent1</code> is clicked, then <code>Child1</code> content should be shown and for <code>Parent2</code> , <code>Child3</code> content should be shown. </p>
  
  <p>I have tried to do this using the click events and adding and removing classes, but didn't get desired result. See my code below:</p>
  
  <pre><code>    &lt;div id="mytree"&gt;&lt;/div&gt;
      &lt;p class="hidden pele" id="dog"&gt;I'm Dog&lt;/p&gt;
      &lt;p class="hidden pele" id="lion"&gt;I'm Lion&lt;/p&gt;
      &lt;p class="hidden pele" id="mobile"&gt;I'm Mobile&lt;/p&gt;
      &lt;p class="hidden pele" id="lappy"&gt;I'm Lappy&lt;/p&gt;
  </code></pre>
  
  <pre><code>var arrayCollection = [
  {"id": "animal", "parent": "#", "text": "Animals", "state": {"selected": true}},
  {"id": "device", "parent": "#", "text": "Devices"},
  {"id": "dog", "parent": "animal", "text": "Dogs"},
  {"id": "lion", "parent": "animal", "text": "Lions"},
  {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
  {"id": "lappy", "parent": "device", "text": "Laptops"},
  ]; 
  var all_p = $('.pele');
  $('#mytree').jstree({
      'core': {
          'data': arrayCollection
       }
  }).on(
        "select_node.jstree", function(evt, data){
            all_p.each(function(){
                if(this.id === data.node.id){
                    $(this).removeClass('hidden');
                }else{
                    if(!$(this).hasClass('hidden')){
                         $(this).addClass('hidden');
                    }
                }
             })
   });
  
  $("#mytree &gt;ul &gt;li &gt;a").on('click', function(){
        $(this).prev('i').trigger('click');
        $(this).next('ul.jstree-children li a').toggleClass('jstree-clicked'); 
  });
  </code></pre>
  
  <p>Fiddle Link: <a href="https://jsfiddle.net/khz65nv0/3/" rel="nofollow noreferrer">https://jsfiddle.net/khz65nv0/3/</a></p>
  
  <p>Eg: If <code>Parent1</code> is clicked, then <code>Child1</code> content should be shown and for <code>Parent2</code> , <code>Child3</code> content should be shown.</p>