Hi,
i was struggling for a function where only 1 thumbnail should be active and others inactive when clicked on the particular thumbnail. code:
1. view: 2. <script type="javascript"> 3. function PlayVideo_options(videoFile, id) { 4. document.getElementById(id).className = 'video_option active_video'; 5. } 6. </script> 7. 8. <div id="video_options"> 9. <% for eligible_exercise in excercises %> 10. <% exercise = eligible_exercise.exercise %> 11. <div onclick="PlayVideo_options('<%= exercise.path_to_video %>', 'active_<%= exercise.id %>')" class="video_option" id="active_<%= exercise.id %>"> 12. <div class="thumbnail"><img src="<%= exercise.path_to_thumbnail %>" width="80" height="75" /></div> 13. </div> 14. <% end %> 15. </div>
what i want is, when user clicks on 1st thumbnail the class should become 'video_option active_video'.And when clicks on 2nd thumbnail, the 2nd thumbnail should become 'video_option active_video' and the 1st thumbnail should become 'video_option'
Means there should be only 1 thumbnail in class="video_option active_video" state when clicked and others in class="video_option" and i was getting all active when clicked using above function
thanks in advance !!