JSFiddle - React, Tailwind, and code Playground

by mistaecko

HTML

<div class="grid-4" class="rightarticle">
                <article>
                    <section id="rform">
                    </section>
                    <section>
                        <script>
                            
                        </script>
                        <p>(should fade all images images out, then hide them completely)</p>
                        <div id="testimage2">
                            <div class="grid-2">
                                <ul>
                                    <li>
                                        <img id="kit4" src="http://placekitten.com/40/40" alt="kittens" />
                                    </li>
                                    <li>
                                        <img id="kit5" src="http://placekitten.com/40/41" alt="kittens" />
                                    </li>
                                    <li>
                                        <img id="kit6" src="http://placekitten.com/40/39" alt="kittens" />
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                </article>
            </div>

JavaScript

Ext.onReady(function() {
    Ext.create('Ext.Button', {
        renderTo: 'rform',
        id: 'sb2',
        text: 'el.hide(true)',
        handler: function() {

            Ext.select('#testimage2 img', false).each(function(elem, c, idx) {
                elem.setVisibilityMode(Ext.Element.DISPLAY);
                if (elem.isDisplayed()) {
                    elem.hide(true);
                    Ext.getCmp('sb2').setText("el.show(true)");
                }
                else {
                    elem.show(true);
                    Ext.getCmp('sb2').setText("el.hide(true)");
                }
            });
        }
    });
});