Full width div below list row visible on click

Question!

I'd like to have a series of rows of images (all the same size) that, when clicked, open a description below that fills the width of the screen (see image below).

enter image description here

The only way I have been able to do this is by making seperate lists of 5 items and then placing all the descriptions below these.

However this is inconvenient and means that I am stuck on 5 items per row and cannot thus make it responsive. It also means lots of messy scripts.

Is there anyway to have all the li items grouped together and have all the text descriptions connected to their relevant item? Also is there a way to do all of this in one piece of script?

This is what I have managed so far:

HTML

<ul>
    <li class="item" id="1"><img src="images/1.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="2"><img src="images/2.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="3"><img src="images/3.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="4"><img src="images/4.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="5"><img src="images/5.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
</ul>
<div id="1-text" class="description">
    <p>Filler text</p>
</div>
<div id="2-text" class="description">
    <p>Filler text</p>
</div>
<div id="3-text" class="description">
    <p>Filler text</p>
</div>
<div id="4-text" class="description">
    <p>Filler text</p>
</div>
<div id="5-text" class="description">
    <p>Filler text</p>
</div>
<ul>
    <li class="item" id="6"><img src="images/6.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="7"><img src="images/7.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="8"><img src="images/8.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="9"><img src="images/9.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="10"><img src="images/10.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>

</ul>
<div id="6-text" class="description">
    <p>Filler text</p>
</div>
<div id="7-text" class="description">
    <p>Filler text</p>
</div>
<div id="8-text" class="description">
    <p>Filler text</p>
</div>
<div id="9-text" class="description">
    <p>Filler text</p>
</div>
<div id="10-text" class="description">
    <p>Filler text</p>
</div>

Script

$(document).ready(function(){
  $("#1").click(function(){
    $("#1-text").toggleClass("text_display")
    $("#1 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#2").click(function(){
    $("#2-text").toggleClass("text_display")
    $("#2 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#3").click(function(){
    $("#3-text").toggleClass("text_display")
    $("#3 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#4").click(function(){
    $("#4-text").toggleClass("text_display")
    $("#4 .up-arrow").toggleClass("text_display")
  });
});

CSS

.item {
    width: calc(20% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    padding: 0px;
    position: relative;
}

.description {
    display: none;
    position: relative;
}

.text_display {
    display: block;
}

Thanks in advance!



Answers

I've made a working Codepen so you can see the changes I've made. It's here

Instead of binding a click event to every element with $(document).ready It's preferable to use

$(element).on('click', function(){
  //actions here
});

And it's advisable you write one function only to handle every element (e.g)

$('.class-for-element-to-be-clicked').on('click', function(){
  $('#'+$(this).attr('id')+'-text').toggleClass('text-display');
  $('#'+$(this).attr('id')+' .up-arrow').toggleClass('text-display');
});


EXAPMPLE SOLUTION is here on jsbin

You can change your CSS

.item { width: calc(19% - 10px); }

or

.item { width: calc(20% - 14px); }

By : Yar HTUT


If I am reading this correctly, Message would contain a List<MessageUser>.

If that's the case then this should get you close:

var List<Message> messages = 
    ( from m 
      in db.Messages 
      where 
          m.UserID == userid || m.MessageUsers.Any(mu => mu.UserID == userID) 
      select m).ToList();
By : Sam Axe


This video can help you solving your question :)
By: admin