We need to add a new interaction to show the ratings chart with a click. Let us remove our current on-click interaction:
$("#movies-near-me li").click(function(){
$(this).toggleClass("open")
});The new interaction will include two buttons: one to show the movie description and the other to show the ratings chart. Inside the img folder, you will find an options.png image sprite. It has icons for both information and charts.
Using the details-button and charting-button classes, let us add some styles to styles.css. Each button will be 45 px x 45 px, using absolute positioning to place it in the bottom-right corner:
.details-button,.charting-button{
width:45px;
height:45px;
cursor:pointer;
position:absolute;
bottom:10px;
right:0;
background:none;
border:none;
background-image:url(../img/options.png)
}Place the details button to the left-hand side of the charting button:
.details-button{
right:45px;
}Set the correct image for the charting button:
.charting...