"Expanding review and rating box by 'msurguy' changed"
Bootstrap 3.3.0 Snippet by AlexandrePrazeres

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" style="margin-top:50px"> <div class="col-md-12"> <form class="formtest"> <button type="button" class="btaval btn btn-success" data-toggle="collapse" data-target="#1" onClick="esconder(this)">Review !!</button> <div id="1" class="collapse"> <div class="col-md-12 avaliar "> <textarea cols="50" id="comentario" name="comment" value="" placeholder="Tell me your rate"></textarea> <div class="stars starrr" data-rating="0"> <input class="nota" name="rating" type="hidden" value=""> </div> <div class="text-right"> <button class="btn btn-success" type="submit" onclick="test()" >Enviar <i class="fa fa-reply"></i> </button> <span class="btn btn-danger" data-toggle="collapse" data-target="#1" onClick="mostrar()">Cancelar <i class="fa fa-times"></i> </span> </div> </div> </div> </form> </div> </div> Changed form to class insted of action or method just for test result without send submit<br> Changed his resize function to native colappse panels<br> <a href="http://bootsnipp.com/snippets/featured/expanding-review-and-rating-box"> SEE Original version</a> </div>
.avaliar{ margin-top:5px; background-color:#EDEDED; } .avaliar textarea{ width:100%; } .stars { margin: 20px 0; font-size: 24px; color: #d17581; }
var __slice=[].slice;(function(e,t){var n;n=function(){function t(t,n){var r,i,s,o=this;this.options=e.extend({},this.defaults,n);this.$el=t;s=this.defaults;for(r in s){i=s[r];if(this.$el.data(r)!=null){this.options[r]=this.$el.data(r)}}this.createStars();this.syncRating();this.$el.on("mouseover.starrr","span",function(e){return o.syncRating(o.$el.find("span").index(e.currentTarget)+1)});this.$el.on("mouseout.starrr",function(){return o.syncRating()});this.$el.on("click.starrr","span",function(e){return o.setRating(o.$el.find("span").index(e.currentTarget)+1)});this.$el.on("starrr:change",this.options.change)}t.prototype.defaults={rating:void 0,numStars:5,change:function(e,t){}};t.prototype.createStars=function(){var e,t,n;n=[];for(e=1,t=this.options.numStars;1<=t?e<=t:e>=t;1<=t?e++:e--){n.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"))}return n};t.prototype.setRating=function(e){if(this.options.rating===e){e=void 0}this.options.rating=e;this.syncRating();return this.$el.trigger("starrr:change",e)};t.prototype.syncRating=function(e){var t,n,r,i;e||(e=this.options.rating);if(e){for(t=n=0,i=e-1;0<=i?n<=i:n>=i;t=0<=i?++n:--n){this.$el.find("span").eq(t).removeClass("glyphicon-star-empty").addClass("glyphicon-star")}}if(e&&e<5){for(t=r=e;e<=4?r<=4:r>=4;t=e<=4?++r:--r){this.$el.find("span").eq(t).removeClass("glyphicon-star").addClass("glyphicon-star-empty")}}if(!e){return this.$el.find("span").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}};return t}();return e.fn.extend({starrr:function(){var t,r;r=arguments[0],t=2<=arguments.length?__slice.call(arguments,1):[];return this.each(function(){var i;i=e(this).data("star-rating");if(!i){e(this).data("star-rating",i=new n(e(this),r))}if(typeof r==="string"){return i[r].apply(i,t)}})}})})(window.jQuery,window);$(function(){return $(".starrr").starrr()}) $(function(){ $('.starrr').on('starrr:change', function(e, value){ var nota = $(this).find('.nota'); nota.val(value); }); }); function esconder(a){ $(a).addClass('hidden'); } function mostrar(){ if ($('.btaval').hasClass('hidden')){ $('.btaval').removeClass('hidden'); } } function test(){ $(".formtest").submit(function(e){ var result = $(this).serialize(); alert(result); e.preventDefault(); }); }

Related: See More


Questions / Comments: