What is the best practice for a link that has two functions?

Question

For Example, lets say I have a book viewer with list of (parent-child) bookmarks. my problem is how to deal with bookmarks when it have two action in the same link.

^{download bmml source – Wireframes created with Balsamiq Mockups}

In the above mockup sketch I have a parent bookmark item Title 3 that lead to page number 100 and in the same time Title 3 is a collapsed menu that have sub-items within it.

If you can see that Title 3 in the bookmark list view have two action ... the first action is the link that lead to the page 100 directly and second is the collapsed menu under it. as user experience, user may what to open the sub titles for explore and navigate before deciding to click over any of it. so I have two clicks in the same link, one is leading to the page and the other open the sub items.

My question: what is the good practice having two actions (function) in the same link? while I don't what to use the [+] beside the title as show in the above sketch. is there any other looking that may help?

Answer 1

I've come across this problem multiple times and nobody ever agrees on the best outcome :(

Personally I think 1 link shouldn't perform 2 functions, it should either open the list or take you to the top item page you describe. You can still have it so that when you arrive on that top item there is a new submenu listed under that item of course.

That's effectively what happened here on a project I worked on: https://www.crunch.co.uk/who-we-help/accounting-for-freelancers/

I argued against it as it's particularly problematic on mobile. In mobile the team decide to just take out one whole level of the navigation to deal with the problem which, once again, I was horrified by.

I suggested something more like this (but obviously more elegant):

^{download bmml source – Wireframes created with Balsamiq Mockups}

I'd also love to read a well researched (if not definitive) answer to this dilemma :)