Changing the size of a list image (thumbnail) in Javascript

[Andy Parker]

list2 is a list component, yes, in fact it's the second list component in the larger list.

What I want to do is to programatically be able to set the height of the list component so that when a user selects that component all of the others shrink (I use a timer to give the over-all effect) while leaving that one there and displaying other appropriate info.

Is that possible? I've written the code to handle the timing etc, just need the javascript CSS code that will actually allow me to set the height of the list component now.

[Maryna Brodina]

Hello! Sorry,not sure I understand. Could you clarify what is the exact component you're going to re-size? Could you post some screenshot and clarify what component user needs to click and what result are you expecting?

[Andy Parker]

Sorry Maryna,

Basically I have a list, 5 items in length.
I want to adjust the height of each of the list items at will.

The screenshot below shows the list, if I select the first item "Opening Times" I want to set the height of the others to 1, but in steps, so it gives the impression they are shrinking.

At the moment though, I cant seem to get the list items to a height of 1.

So, just to summarise, I dont want to set the whole list to a height of 1, I want to set the height one at a time so as to give a cascading effect of each one reducing in size at a time. I have written the code for this already, but I need to work out how to get the list elements to actually allow their height to be adjusted.

[Maryna Brodina]

You have to change size of li element. Try this code preAppery("mobilelistitemName").closest("li").css({"height":"1px", "min-height": "1px", "overflow": "hidden"});/premin-height and overflow CSS parameters you can change in CSS asset. This way code would decrease and you can set height only.

[Andy Parker]

Fantastic! -exactly what I needed, thanks Maryna!