First of all, there are a few things to consider:
Most interfaces that use long expandable cards only offer a single expand option, usually by clicking on the whole card. So that's what users will most likely expect.
Having the "details..." button might be ok for a single card, but when you have 10-20 cards on the screen, it will create a lot of noise, and it will distract users from the card content that actually matters.
To solve that, you need to:
- Allow the whole card to be clickable in order to expand its contents.
- Remove the "details..." buttons completely to avoid clutter.
The question becomes:
How to show multiple views of an expanded card?
Answer:
A simple solution is to use tabs inside the expanded area.
This will allow you to group the information in various ways, without cluttering the UI.
And you can improve it by adding a shortcut for switching directly to a certain tab:
- You can use the whole left side of the card as a button that expands the card and selects the 1st tab.
- You can use the right side of the card as another button that expands the card and selects the 2nd tab.
- You could even split the card into multiple invisible buttons that open a specific tab.
Expected question:
Will the users know on which part of the card to click?
Answer:
No. But they will learn fast enough when using the card. Clicking on different parts of the card is considered a shortcut, since users can simple expand the card and change the tab manually.
Here is a basic example, with colors representing invisible buttons for opening each tab:
Of course, you could also have vertical tabs.
This is just a simple solution from which you can improve further.