Display content of a nested div

Question

I've created an HTML document with a div for a map. The map shows some Points of Interest. At the bottom of the map there is a bar with thumbnails relative to the PoI. Each picture has its id and class="photoThumbnail". Besides the map there is a div with class=sidebar that contains, in turn, two elements.

The first one (class=general) is always visible, the second one (class= detail) is set as not visible on loading.

When I click on a picture in the picture bar, the map zooms in to the relative point of interest. At the same time I would like to show, in the aside bar, the content relative only to the clicked picture. The HTML structure is the following:

HTML element for pictures:

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

HTML element for the sidebar:

<div class="sidebar" id="fountainSideBar" role="complementary">
    <aside class="general">
        <h2>Fountains</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          
    </aside>    
    <aside class="detail">
        <div id="fountain1-AS">
            <h2>Fountain1</h2>              
            <div class="caption">           
                <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="fountain2-AS">
            <h2>Fountain2</h2>              
            <div class="caption">           
                <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </aside>
</div>

The jQuery script is as follows:

$(".photoThumbnail").click(function(){
    var img_id = this.id;
    var aside_div_id = "#" + img_id + "-AS";
    $("aside").children("aside_div_id").show();
    return false;
});

It doesn't work, nothing is shown. If I write only

$("aside").show();

The sidebar shows the content of the entire element aside (the description of all fountains), but if I add .children("aside_div_id") I cannot see the requested content (only the fountain I clicked).

Answer 1

you are trying to find the children in a wrong way. you can use find and no need quotes

check this snippet

$(document).ready(function() {
  $(".photoThumbnail").click(function() {
    var img_id = this.id;
    var aside_div_id = "#" + img_id + "-AS";

    var childDiv = $("aside.detail").find(aside_div_id);
    $(childDiv[0]).show().addClass('red');
  });

});

.red {
  background: red;
}
.detail div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

<div class="sidebar" id="fountainSideBar" role="complementary">
  <aside class="general">
    <h2>Fountains</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </aside>
  <aside class="detail">
    <div id="fountain1-AS">
      <h2>Fountain1</h2>
      <div class="caption">
        <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="fountain2-AS">
      <h2>Fountain2</h2>
      <div class="caption">
        <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </aside>
</div>

Hope it helps

Answer 2

Use this fiddle. It may help!

JS:

$(".photoThumbnail").click(function(){
    var img_id = $(this).attr('id');
    var aside_div_id = "#" + img_id + "-AS";
    $("aside").children('div[id^="fountain"]').hide();
    $("aside").children(aside_div_id).show();
    return false;
});

HTML:

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

<div class="sidebar" id="fountainSideBar" role="complementary">
    <aside class="general">
        <h2>Fountains</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          
    </aside>    
    <aside class="detail">
        <div id="fountain1-AS">
            <h2>Fountain1</h2>              
            <div class="caption">           
                <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="fountain2-AS" style="display:none;">
            <h2>Fountain2</h2>              
            <div class="caption">           
                <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </aside>
</div>

Answer 3

@Peter is right, you don't need the quotes around "aside_div_id":

jQuery(document).ready(function() {
  $(".photoThumbnail").click(function(){
      var img_id = this.id;
      console.log(this.id);
      var aside_div_id = "#" + img_id + "-AS";
      $("aside").children(aside_div_id).show();
      return false;
  });
});

working jsfiddle