JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="magic-container">               
            <div class="input-group">
                <input type="text" class="typeahead form-control" placeholder="Select category ..." />
                <ul class="dropdown-menu" style= "margin-top: -10px !important;">
                      <li id="one"><a href="#">Sports</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="two"><a href="#">Entertainment</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="three"><a href="#">Travel</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Business</a></li>

                      <li><a href="#"></a></li>
                </ul>

                <span class="flip">
        <a href="#" class="mirror1"> FLIP </a> 
                </span>
            </div>
       </div>
        <div class="magic-bar">
            <span id="rating-slider" class="ui-slider-range"></span>
            <span class="flip">
                <a href="#" class="mirror2"> FLIP </a>
            </span>
        </div>

CSS

.flip {
            font-family: calibri;
            font-size: 2em;
            float: right;
        }

JavaScript

$(".flip").on('click', function() {
         alert("hi");
            $(".magic-bar").toggle();
                    $.ajax({
                            alert('flip1');
                            url: "invite_db.php",
                            type: "POST",
                            data: {"flipClick": 'fc1'},
                            success: function(data) {
                                $(".articleContent").html(data);

                                //setInterval("messageDisable()", 5000);
                            }
                        });

            $(".magic-container").toggle();
                    $.ajax({

                            url: "invite_db.php",
                            type: "POST",
                            data: {"flipClick": 'fc2'},
                            success: function(data) {
                                $(".articleContent").html(data);

                                //setInterval("messageDisable()", 5000);
                            }
                        });

        });