JSFiddle - React, Tailwind, and code Playground
by ricoshae
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="slide21">
<div class="mh1">Activity</div>
<p class="ch2">Social Media</p>
<p>Re-order the social media icons first to last in the order that they were first established.</p>
<ul class="ui-sortable" id="act" style="list-style-type: none;
margin: 0;
padding: 0;">
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img1" id="img1"><i class="fa fa-youtube fa-2x" title="Youtube"></i><div class="correct">2005</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img2 list-group-item" id="img2"><i class="fa fa-twitter fa-2x" title="Twitter"></i><div class="correct">2006</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img3 list-group-item" id="img3"><i class="fa fa-linkedin fa-2x" title="LinkedIn"></i><div class="correct">2003</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;"...JavaScript
jQuery(document).ready(function(){
jQuery(".correct").hide();
jQuery( "#act" ).sortable({
stop: function (event, ui) {
checkact();
}})
})
function checkact()
{
var items = jQuery('#act li');
if(
jQuery(items[0]).attr('id') === "img3" &&
jQuery(items[1]).attr('id') === "img4" &&
jQuery(items[2]).attr('id') === "img1" &&
jQuery(items[3]).attr('id') === "img2"
) {
jQuery(".correct").show();
} else {
jQuery(".correct").hide();
}
}