CollapsingHeader with custom clickable header UI?

[nnmm]

The contents of a CollapsingHeader header can be customized using CollapsingState::show_header(), but it seems that clicking these contents will not toggle the "open" state of the body, only clicking the arrow/triangle will.

Is there an easy way to create a custom header such that clicking the header will collapse and expand the body?

[paul-hansen]

Could store a bool in your application and use that to tell if it should be toggled the next frame. Then use whatever logic you want inside of show_header to trigger the toggle.

Here's a runnable example:

use crate::egui::Sense;
use eframe::egui;

fn main() {
    let native_options = eframe::NativeOptions::default();
    eframe::run_native(
        "My egui App",
        native_options,
        Box::new(|cc| Box::new(MyEguiApp::new(cc))),
    );
}

#[derive(Default)]
struct MyEguiApp {
    should_toggle: bool,
}

impl MyEguiApp {
    fn new(cc: &eframe::CreationContext<'_>) -> Self {
        Self::default()
    }
}

impl eframe::App for MyEguiApp {
    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            let id = ui.make_persistent_id("my_collapsing_header");

            let mut state = egui::collapsing_header::CollapsingState::load_with_default_open(
                ui.ctx(),
                id,
                false,
            );
            if self.should_toggle {
                state.toggle(ui);
                self.should_toggle = false;
            }
            state
                .show_header(ui, |ui| {
                    let response = ui.vertical(|ui| {
                        ui.label("Custom Header");
                        ui.separator();
                    });
                    let id = ui.make_persistent_id("my_collapsing_header_interact");
                    if ui
                        .interact(response.response.rect, id, Sense::click())
                        .clicked()
                    {
                        self.should_toggle = true;
                    }
                })
                .body(|ui| ui.label("Body"));
        });
    }
}

[dimvoly]

To add to the helpful answer above, for persistence you can use:

let header_collapsing_id =
    ui.make_persistent_id("my_collapsing_header_toggle");

let should_toggle = ui.memory_mut(|m| {
    m.data
        .get_temp::<bool>(header_collapsing_id)
        .unwrap_or_default()
});

if should_toggle {
    header_state.toggle(ui);

    ui.memory_mut(|m| {
        let should_toggle =
            m.data.get_temp_mut_or_default::<bool>(header_collapsing_id);
        *should_toggle = false;
    });
}

So that keeps the persistence values encapsulated in the UI portions of the code.

[dimvoly]

FWIW I had a similar issue but wanted some extra UI elements next to the text portion of the header. I wanted the same styled text portion of the header, which was difficult to replicate with labels when using [CollapsingHeader].

Ended up copy pasting the whole [CollapsingHeader] struct into my own library and adding the ui elements to it that I was after. Enough of egui is public that you can do this without a PR.