<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();
});
}
