We have a list of profiles/companies in this application we are building. In 1 section there are 3 circle, red, yellow and green side by side. Beside each circle is a amount and we are currently using some JQuery function to do inline edit of these values and this is working fine.
What we would like is for the figure to be hidden by default and once 1 of the circle is clicked it would slide to the left and reveal the value, keeping the inline edit function working. The user can then either click the same circle to close it or click another circle to open it as well.
Attached is a screenshot. The top section show all the circles closed and the last item in the list shows an example of the red circle being in the open position.