show-hide

We have been experiencing some problems in using react now but it kinda boils to one part of how we have been using react. How should we have been showing/hiding child components? This is how we have coded it (this are only snippets of our components)... _click: function() { if ($('#add-here').is(':empty')) React.render(<Child />, $('#add-here')[0]); else React.unmountComponentAtNode($('#add-here')[0]); }, render: function() { return( <div> <div onClick={this._click}>Parent - click me to add child</div> <div id="add-here"></div> </div> ) } and lately I've been reading examples like it should

I have this AngularJS app. Everything works just fine. Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed. Currently I’m evaluating two options, but I’m absolutely open to other options. Option 1 I could create the new HTML element for the pop-up, and append to the DOM directly from the controller. This will break the MVC design pattern. I’m not happy with this solution. Option 2 I could always insert the code for all the pop-ups in the static HTML file. Then, using ngShow , I can hide / show only the correct pop

I have an HTML 5 video in a div. I then have a custom play button - that works fine. And I have the video's visibility set to hidden on load and visible when the play button is clicked, how do I return it to hidden when the play button is clicked again? function showVid() { document.getElementById('video-over').style.visibility = 'visible'; } #video-over { visibility: hidden; background-color: rgba(0, 0, 0, .7) } <div id="video-over"> <video class="home-banner" id="video" controls=""> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js

So I start with items 1-4: <div class="someDiv bold italic" style="display: none;">Lorem</div> <div class="someDiv regular italic" style="display: block;">Lorem</div> <div class="someDiv bold" style="display: none;">Ipsum</div> <div class="someDiv regular" style="display: block;">Ipsum</div> Then I have some input checkboxes: <input class="regular" type="checkbox" /> <input class="bold" type="checkbox" /> <input class="italic" type="checkbox" /> So basically I have jQuery showing and hiding divs. Now I have another function that must iterate through these divs (one for each checkbox), and show

Which am I better off doing? .hide() is quicker than writing out .css("display","none") , but what's the difference and what are both of them actually doing to the HTML element? From the jQuery page about .hide() : "The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline." So