How to fix jQuery show/hide and parent navigation?

Question

I really love jquery that makes it easy to navigate the dom and to show/hide stuff, but if it doesn't work it seems hard to debug. I made some buttons for selecting texts. Pressing the main button toggles the text buttons, which works nicely.

Pressing a text button does copy the text to the selection field. However, after hiding the text buttons, the main button cannot toggle again, to unhide the text buttons in case the user wants to select another text.

Beside, I had trouble using jQuery parent() and sibling() to navigate from the text field to the selection field. I fixed this with JS parentElement, but I wonder what I did wrong and how to do this in jQuery.

Here is my code, it looks a lot, but I wanted to leave the css in to make it easier to recreate the with actual button-shape elements:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        // callback for the onclick event on the choice buttons
        // (not used)
        // copy the text of a choice to the selection field
        function choice(s) {
            var txt = $(s).text();//s.textContent;
            $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//copies selected text to selection field
            $(s).parent().toggle();//hide(); hides all buttons of the block

            //var d1 = $('div.selection').text();//ok
            //var d9 = $(s).closest('.choiceblock').find('selection').text();
            //var l9 = $(s).closest('.choiceblock').find('selection').length;
            //var d2 = $('div#material_quant div.selection').text();//ok
            //var n2 = $('div#material_quant div.selection').attr('name');
            //var d3 = $('div#material_quant div.choices').siblings('.selection').text();
            //var n3 = $('div#material_quant div.choices').siblings('.selection').attr('name');
            //var l3a = $('div#material_quant div.choices').siblings().length;//?
            //var l3 = $('div#material_quant div.choices').siblings('.selection').length;//0
            //var d4 = $(s).parent().parent().siblings('.selection').text();
            //var n5 = $(s).parent().attr('name');
            //var n6 = $(s).parent().parent().attr('name');
            //var d5 = $(s).attr('name');
            //var d5a = s.nodeName;//DIV
            //var d6 = s.parentElement.className;//ch_qualitative
            //var d7 = s.parentElement.parentElement.className;//choices
            //var d8 = s.parentElement.parentElement.parentElement.nodeName;//DIV
            //var d10 = $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').length;//19
            //$(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//works
            //$(s).parent().parent().siblings('.selection').text(txt);
            return false;
        }
        $(document).ready(function () {
            // click handler on the text buttons
            $('div.choices div.button').click(function () {
                // get the selected text
                var txt = $(this).text();
                // copy selected text to selection field
                $(this.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);
                $(this).parent().hide();
                return false;
            });
            // click handler on the entire block
            $('div#material_quant div.button').click(function () {
                $('div.choices').toggle()
            });
        });
    </script>
    <style>
        div.button {
            float: left;
            height: 2em;
            line-height: 2em;
            width: 6em;
            color: white;
            background-color: darkgreen;
            text-decoration: none;
            display: inline-block;
            margin: 1em;
            text-align: center;
        }
        div.selection {
            display: inline-block;
            height: 2em;
            line-height: 2em;
            margin: 1em;
        }
    </style>
</head>
<body>
    <div id="material_quant" class="choiceblock">
        <div class="button">Materiaal..</div>
        <div class="selection">(geen)</div>
        <div style="clear: both;" />
        <div class="choices">
            <div class="ch_qualitative">
                <div class="button">Veegstof</div>
                <div class="button">Stripmonster</div>
                <div style="clear: both;" />
            </div>
            <div class="ch_quantitative">
                <div class="button">Vloerb</div>
                <div class="button">Isolatie</div>
                <div style="clear: both;" />
                <div class="button">Plaat</div>
                <div class="button">Kit</div>
                <div style="clear: both;" />
                <div class="button">Koord/Vilt</div>
                <div class="button">Bitumen</div>
                <div style="clear: both;" />
                <div class="button">Pakking</div>
                <div class="button">Cement</div>
            </div>
        </div>
    </div>
</body>
</html>

I also left in comments my jQuery experimental code.

Correct me if im wrong. So you click a button under choices, and it changes the text. The top left button is supposed to show/hide the choices. Any specific functions for the qualitative and quantitative sections? — Brian, Jan 12 '17 at 16:30
@Brian Quant/Qual is selected by another set of buttons, but I left those away here, as that does not really matter. It does result in another level in the tree structure, and if it all works here, I can copy the solution directly into my project. — Roland, Jan 12 '17 at 16:33
http://stackoverflow.com/questions/7757523/is-it-allowed-to-have-a-self-closing-div-tag-in-an-html-document — A.Sharma, Jan 12 '17 at 16:45
If you log the children element of the qualitative class, you can see that not all elements are present in the collection. — A.Sharma, Jan 12 '17 at 16:46
@A.Sharma Making the div with closing tags fixed it!!! Incredible! I will also study your other comment. — Roland, Jan 12 '17 at 16:48
@Roland You seem to be interested in simplifying your code, so I whipped this up for you. JQuery is supposed to make life easier :) https://jsbin.com/kiyarevemu/1/edit?html,console,output — Brian, Jan 12 '17 at 16:56

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

As I stated in the comments, you're not closing your div tags correctly.

Change <div style="clear: both;" /> to <div style="clear: both;"></div> wherever present.

For more information see:

edited May 23 '17 at 12:16

Community

1
1

answered Jan 12 '17 at 16:52

A.Sharma

2,771
1
11
24

Now that I learned that an innocent looking error can have such big consequences, I grepped for all `clear:both` strings in my code. But to really find all self-closing devs, I will probably have to write a medium sized program with the xml library. VS2015 is not warning me for this. – Roland Jan 12 '17 at 17:08

Marc · Answer 2 · 2017-01-12T17:01:52.893

0

The problem is in using $(this).parent().hide() on the click event. You must ensure that you hides the div that the "Materiaal" button is "toggling". Changing only this line works:

$(this).parent().hide();

for this one:

$('div.choices').hide();

Also, you must write specifically the close div tag on "clear: both":

<div style="clear: both;"></div>

edited Jan 12 '17 at 17:01

answered Jan 12 '17 at 16:33

Marc

1,359
1
15
39

score 0 · Answer 3 · answered Jan 12 '17 at 17:00

0

I think the issue is that your top button is toggling 'choices' and your list of buttons is toggling 'ch_qualitative'.

Edit: Change $(this).parent() to $(this).parent().parent() and it should fix your issue

answered Jan 12 '17 at 17:00

Michael Radzwilla

23
7

No, this is intentional. However, if you could improve my ugly JS code with the `elementName` stuff and turn it to nice jquery, I'd be very happy. I struggled with that. But it might also because of the `div` error. – Roland Jan 12 '17 at 17:09

How to fix jQuery show/hide and parent navigation?

3 Answers3

Linked