The rotation is decided based on a boolean named expanded, this will be our components state.

In Jetpack Compose, the declarative UI framework will render again only elements that had their state changed, when we talk about state in Compose UI context we usually refer to some function variables that hold or represents, that specific state.

This could be a primitive or an object.
and for our composable function to hold state, it needs to remember it across recomposition (re-rendering), otherwise, the state will be reset on each composition.

Our item is expandable, therefore it needs to hold a state that declares whether or not it is expanded.

To do that we will go back to our initial composable definition and add a state variable

@Composable
ExpandableListItem() {
var expanded by remember { mutableStateOf(false) }  
   Card(modifier = Modifier.clickable { expanded = !expanded}) {   
      Row(...) {
         TitleAndSubtitle(...)
         Icon(...) 
      }
   }
}

mutableStateOf

remember

Now let’s implement the expandable part of the component.

Now we need to add another section on the bottom of our component,

Let’s wrap the Row element in a Column so we can place the extra items element below it.

@Composable
ExpandableListItem() {
var expanded
   Card(...) { 
        /// Wrap the row in a Column
        Column { 
            Row(...) {
               TitleAndSubtitle(...)
               Icon(...) 
            }
            
        // And add the extra items sections      
            Column {
              ExtraItem(item = Item())
              ExtraItem(item = Item())
            }
        }
    }
}
data class Item (
   val title: String,
   val date: String
)

Where ExtraItemis just a Row with two Text composables.

@Composable
fun ExtraItem(item: Item) {
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Text(text = item.title)
        Text(text = item.date)
    }
}

Now let’s add some styling to our expandable content with some Dividers and Spacers:

//// Extra items sections
    
    Divider(modifier = Modifier.height(1.dp))
    Column(modifier = Modifier.padding(...)) {

        Spacer(modifier = Modifier.height(10.dp))
        ExtraItem(item = Item())

        Spacer(modifier = Modifier.height(10.dp))
        Divider(modifier = Modifier.height(1.dp))
        Spacer(modifier = Modifier.height(10.dp))

        ExtraItem(item = Item())

        Spacer(modifier = Modifier.height(10.dp))
        Divider(modifier = Modifier.height(1.dp))
        Spacer(modifier = Modifier.height(10.dp))

        ExtraItem(item = Item())

    }

And now we get this beautiful component!

Animate visibility with ease

@Composable
fun ExpandableListItem() {
    var expanded by remember { mutableStateOf(false) }
    Card() {
        Row() {
            TitleAndSubtitle()
            Icon()
        }
        AnimatedVisibility(visible = expanded) {
            Column {
                ExtraItem(item = Item())
                ExtraItem(item = Item())
            }
        }        
    }
}

AnimatedVisibility(
    visible = expanded,
    enter = expandVertically(
        animationSpec = tween(
              durationMillis = 300, easing = FastOutLinearInEasing)
    ),
    exit = shrinkVertically(
        animationSpec = tween(
             durationMillis = 300, easing = FastOutLinearInEasing)
    )
)