stop multiple selection from a html dropdown

Question

I have a table, in one of the columns I have a textbox and a div with an onClick event on top of the textbox, div opens(expands) and then when the image in it is selected, or if the user clicks anywhere else on the page, it gets closed.

The problem is, if I open multiple rows and open that div in each column, I want all the other divs to get closed automatically, like it happens in the "accordion". How to do it through jquery?

<ul class="ul_color_palette" >
<li><img src="img/color_palette/ico_red_sq.png"/> <img src="img/color_palette/ico_blue_sq.png"/></li>  
<li><img src="img/color_palette/ico_red_circle.png"/> <img src="img/color_palette/ico_blue_circle.png"/> </li>  
<li><img src="img/color_palette/ico_red_tri.png"/> <img src="img/color_palette/ico_blue_tri.png"/></li>  
</ul>

its a table

Link Here

Please post your code... But anyway, I would suggest to simply add something like a "closeall()" function call as the first instruction when opening any div... in order to call any div and then open the one you want — Laurent S., May 07 '13 at 13:14
@ArunPJohny p Jhonyon that particular column click . that dive open. you can see that red selected image — , May 07 '13 at 13:17
Call `$('.ul_color_palette').hide()` before you open the div — Arun P Johny, May 07 '13 at 13:20
@ArunPJohny calling hide() event also hiding the div. any else — , May 08 '13 at 05:49

score 0 · Answer 1 · edited May 23 '17 at 12:28

If you want to close all of them once the user selects the desired image, just use a proper naming pattern for the ids that you are going to assign to each div that is going to be expanded, then you can use jQuery's slideUp function to hide all the DIVs that start with a specific name (Check this link here to understand how to use a selector that can refer to multiple DIVs: Wildcards in jQuery selectors).

Also, check this page here: http://api.jquery.com/slideUp/

stop multiple selection from a html dropdown

1 Answers1