How can I apply a .toggle query ONLY to the child element of div.selected?

I am using vis.js with custom styles and jquery behaviors.

I want to write a jquery statement that says:

Every time .item.range or .item.box is selected, show p.extra within the selected item. Every time anything else on the page is clicked, hide p.extra in the previously selected item.

Every time .item.range or .item.box is selected, they are appended with the style .selected, so I had hoped I could use this to define a parent. But I have been trying for several hours to get this to work without luck. So far I have tried to do this using .toggle, .toggleclass(then applying the behaviors to the new class in css), and .show/hide.

I am limited in terms of naming within the confines of vis.js. For example, I can't assign a custom class only to the p tags I want to show hide - each class I assign is shared with 30 other .item elements I don't want to move. This is why I want the script to recognize which parent element the p.extra tag is in.

In my efforts I have written wrong scripts such as:

$( 'p' ).toggle( "slow" ) //makes all p tags on the page toggle about 11 times before stopping.
$( '.extra' ).toggle( "slow" ) //makes all p.extra tags on the page toggle.
$( '.selected','.extra' ).toggle( "slow" ) //makes selected element hide and all .extra elements on the whole page toggle.

The problem i have run into when searching for an answer is that all the examples I could find only relate to unnested elements (I would post links to what I have tried, but since it is my first post SO won't let me!).

Here is a snippet of the relevant HTML generated when using the vis.js timeline:

<div class="item range output" style="left: 806.26204476358px; width: 333.050742629105px; top: 75px;"><div class="content" style="left: 0px;">
    <h3> NEH Digital Humanities </h3>
    <p class="extra"> Communication + Place. Finish draft of journal article </p>
    <div class="type"> output </div>    
  </div></div>
  <div class="item range in_process selected" style="left: 437.527293995642px; width: 344.945412008717px; top: 75px;"><div class="content" style="left: 0px;">
    <h3> NEH Digital Humanities </h3>
    <p class="extra"> Guide to Winning. Work with student editor for 30 hours to finish some more 300 online videos. </p>
    <div class="type"> in_process </div>    

And here is a snippet of the javascript in my file:

 <script type="text/javascript">
 // create a handlebars template
 var source = document.getElementById('template-main').innerHTML;
 var template = Handlebars.compile(source);

 // load data via an ajax request. When the data is in, load the timeline
  $.ajax({
  url: 'data/basic.json',
  success: function (data) {
      // hide the "loading..." message
      document.getElementById('loading').style.display = 'none';

      // DOM element where the Timeline will be attached
      var container = document.getElementById('visualization');

      *snip!*

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, groups, options);
  document.getElementById('window1').onclick = function () {
        timeline.setWindow('2015-05-18', '2016-05-17');
    };
    document.getElementById('window2').onclick = function () {
        timeline.setWindow('2016-05-18', '2017-05-16');
    };
    document.getElementById('window3').onclick = function () {
        timeline.setWindow('2017-05-18', '2018-05-16');
    };
    document.getElementById('window4').onclick = function () {
        timeline.setWindow('2018-05-18', '2019-05-16');
    };
    document.onclick = function() {
        var selection = timeline.getSelection();
        timeline.focus(selection);
        //** I think the script using show-hide or toggle needs to go here **//
    };

 *snip!*    

</script>

I hope what I am asking makes sense to one of you, and that there is a relatively easy fix.

Can you help write the code I am looking for?

Are you looking for something like this Fiddle.

hide all extra on page load

$('.extra').hide();

bind click event to item and range

$('.item,.range').click(function(){
    $('.extra').hide();
    $(this).find('.extra').toggle();
});