c# - A simple show or hide item.text button -
i have mvc 5 project using database. in project have blog-page. page loaded using controller. in page dynamically create list of items (blogitems) using simple '@foreach(var item in collection). each item has id (off course), title , description.
@foreach (var item in model.vmblogitems) { <div class="allblogs"> <div class="blogtitle"> <h4>@item.title</h4> </div> <div id="allblogcontent"> @item.description </div> <a id="moreless" href="">lees meer</a> </div> }
my question how can create button when clicked on description hidden or shown.
i wrote jquery:
<script type="text/javascript"> //when ready $(function () { $('#allblogcontent').hide(); $('#moreless').click(function () { $('#allblogcontent').toggle(); }); }); </script>
however when try this, items show or hide description.
does know how make sure description of selected item shown or hidden? spend 6 hours reading, trying , sadly enough failing make work. use help.
first modify markup each description tag has unique id attached it, , corresponding button has reference id
@{ int i=0; } @foreach (var item in model.vmblogitems) { i++; <div class="allblogs"> <div class="blogtitle"> <h4>@item.title</h4> </div> <div id="allblogcontent@i" class='someclass'> @item.description </div> <a id="moreless" href="" data-desc-id='allblogcontent@i'>lees meer</a> </div> }
your code can figure out which now.
<script type="text/javascript"> //when ready $(function () { $('.someclass').hide(); $('#moreless').click(function () { $('#' + $(this).attr('data-desc-id')).toggle(); }); }); </script>
a footnote
this approach make static references between tags, can move markup around if like. other 2 solutions shown here, far, break if change order of tags.
Comments
Post a Comment