Show and hide elements based on their [title] using Jquery

I am trying to create a list of items which, when you click on one, opens the video related to that item. So I tried to work with [title] so that whenever I click one one item with title=xxx the video with title=xxx will show (and the others will hide). I cannot figure how to use the variable to select the correct item. Here’s what I tried:

$(".speaker").click(function() {
  let speakerName = $(this).attr('title');
  console.log(speakerName);
  $(".speaker-content [title!=" + speakerName + "]").hide();
  $(".speaker-content [title ==" + speakerName + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="presentations">
  <div class="speaker" title="s5-sp1">
    <p><i class="fas fa-info-circle"></i>Dr Daniel</p>
  </div>

  <div class="speaker-content" title="s5-sp1">
    <div class="videowrapper">
      <iframe width="100%" src="https://www.youtube.com/xxx" title="YouTube video player"></iframe>
    </div>
  </div>

</div>

I also tried to go through them with a for each but with no success

Any help is welcome, thanks.

Answer

Your biggest error was the space between the class and the attribute. The attribute is on the same class so they need to be connected. Also, you don’t use the comparative operator == inside an attribute.

$('.speaker').click(function(){
  let speakerName = $(this).attr('title');
  $('.speaker-content').hide();
  $(`.speaker-content[title='${speakerName}']`).show();
});