Selectable image list with captions

Question

I have a selectable image list where I need to display the caption exactly below each image items (example: Caption1 below first item and so on).

I have tried with the following code

How Do I achive it? Is there a way by replacing from li

to something else?

 $('.images_list li').click(function() { $('.images_list .selected').removeClass('selected'); $(this).toggleClass('selected'); var clicked = $(this).attr('title'); $("#"+clicked).removeClass("hidden").siblings().addClass("hidden"); }); 

 .images_list li { list-style: none; float: left; width: 125px; height: 72px; margin-right: 10px; padding:5px } .images_list li span { display:none; position:absolute; top:0px; left:0px; width:24px; height:24px; } .border { border: 1px solid #D8D8D8; } .selected { border: 2px solid #999999; } .hidden { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="images_list"> <li class="border" title="content_1"> <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" /> <span> <img src="" /> <span>Caption1</span> </span> </li> <li class="border" title="content_2"> <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" /> <span> <img src="" /> <span>Caption2</span> </span> </li> </div> <div class="img_info"> <div id="content_1" class="content hidden">content1</div> <div id="content_2" class="content hidden">content2</div> </div> 

Answer 1

just remove display:none and position:absolute from .images_list li span

 $('.images_list li').click(function() { $('.images_list .selected').removeClass('selected'); $(this).children('img').toggleClass('selected'); var clicked = $(this).attr('title'); $("#"+clicked).removeClass("hidden").siblings().addClass("hidden"); }); 

 .images_list li { list-style: none; float: left; width: 125px; height: 72px; margin-right: 10px; padding:5px } .images_list li span { width:24px; height:24px; } .border { border: 1px solid #D8D8D8; } .selected { border: 2px solid #999999; } .hidden { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="images_list"> <li class="border" title="content_1"> <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" /> <span> <img src="" /> <span>Caption1</span> </span> </li> <li class="border" title="content_2"> <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" /> <span> <img src="" /> <span>Caption2</span> </span> </li> </div> <div class="img_info"> <div id="content_1" class="content hidden">content1</div> <div id="content_2" class="content hidden">content2</div> </div>