Twitter Bootstrap Accordion

Question

Working with Bootstrap and JavaScript, and I use it as an accordion format - after clicking on a minimized div it will open and show the elements in the div based on the identifier.

Problem:

If the div does not contain the elements that I want to open, and show the message to the user:

 "no items here" 

How should I do it? In javascript?

This is what I have:

View

 <div class="accordion-body collapse state-loading" data-group-id="13" data-bind="attr: { 'id': 'GroupMember_' + Id(), 'data-type-id': ModelId() }" id="GroupMember_15" data-type-id="15"> <div class="accordion-inner no_border" data-bind="foreach: Children"></div><!--END: accordion-inner--></div> </div> 

If Children is 0 , I want it to be open and this text is shown: No items here

JavaScript:

 OnSuccess: function (data) { var _groups = linq.From(options.groupData); var _groupsToUpdate = _groups .Where(function (x) { return x.Id == options.groupId; }); if (_groupsToUpdate.Any()) { _groupsToUpdate.First().Children = data.Items; } 

Not sure if I am missing something else to share - let me know.

UPDATE

Layout Div:

 <div class='accordion-group'> <div class='accordion-heading'> Group 1 </div> <div class='accordion-body'> <div class='accordion-inner'> <div class='element'>No items here</div> </div> </div> </div> 

I need to click on the accordion class to display the accordion body and get into accordion-inner elements

Answer 1

You need to bind to the show event on the elements of the accordion and perform a check there, from your classes, I assume that you are using Bootstrap v2.3.2:

 $('.accordion .collapse').on('show', function () { var $inner = $(this).find('.accordion-inner'); if($inner.is(':empty')){ $inner.html('No items here'); } }); 

Demo script

Please note that the :empty selector :empty very picky, it will not work if there is a space between the opening and closing .accordion-inner tags.

You can also use if(!$.trim($inner.html())) to check if the element is empty or as suggested by @JL to check the length of the children, just be careful that the text nodes are not treated as children, so the div with a single text was considered empty

Answer 2

Do you have jQuery installed? You can check if the <div> these children:

 if ($('#divId').children().length == 0) { $('#divId').append("no items here"); } 

If you do not have jQuery:

 if (!document.getElementById('divId').hasChildNodes()) { document.getElementById('divId').innerHTML = "no items here"; } 

Based on your editing, I think we are checking accordian-inner for children. If yes, indicate the identifier and replace it with our code. Note: you don’t need a <div> to contain our “no elements” message ... the message will be printed using javascript (plus, if you have a <div> , you actually added a child and the message is no longer applicable). Change your HTML to this:

 <div class='accordion-group'> <div class='accordion-heading'> Group 1 </div> <div class='accordion-body'> <div id='innerId' class='accordion-inner'> <!-- Remove the 'element' div --> </div> </div> </div> 

Then:

 if (!document.getElementById('innerId').hasChildNodes()) { document.getElementById('innerId').innerHTML = "no items here"; }