15

I am trying to create a website for mobile, and I would like the collapse box clickable and not only the text.

Image

I have uploaded the site. http://kristian-jacobs.dk/mobileapp/

Thanks in advance.

Gopal Joshi
  • 2,350
  • 22
  • 49
kristian
  • 213
  • 1
  • 4
  • 12
  • 6
    Please share the codes not websites. – Atal Shrivastava Apr 22 '14 at 11:31
  • What types do you want? Cause I have many lines of code, and not sure where to change it. Though you can right click and view page source, and see the code. – kristian Apr 22 '14 at 11:52
  • @kristian Since the question in your previous comment went unanswered, here's an answer: reproduce the problem with as little code as possible in a fiddle or something. In this case, you only need to provide us with at most as much code as there is in the panel example bootstrap provides – mejdev Feb 10 '16 at 15:55
  • @kristian don't you think you should change marked answer? – Alex Zhukovskiy May 24 '16 at 13:55
  • Please correct the link you have used – NoWar Apr 17 '19 at 07:20

2 Answers2

39

Actually you just have to add btn-block as a class to the a tag.

adius
  • 13,685
  • 7
  • 45
  • 46
  • Oh Thanks, will try that :) That would be way esier todo, will test it later – kristian Jun 13 '14 at 07:29
  • 1
    Just tested it with my site and it worked. This is by far the easiest, simplest solution to making the entire header clickable and not just the link. – MattD Sep 26 '14 at 13:40
  • And to extend this answer, you can easily nest the glyphicons into the anchor link, which will make both the link and icon a clickable block region. very awesome! – klewis Mar 16 '16 at 21:21
  • 1
    This doesn't expand the clickable area to the whole of the panel heading, the heading is only clickable in parts in-line with the link text. This impacts on the user experience. – Harry Jun 29 '16 at 10:44
  • This doesn't not work if user click edge of panel heading [here](http://stackoverflow.com/a/39751131/2218697) is **another working solution**, hope helps. – Shaiju T Sep 28 '16 at 15:00
  • thanks man! perfect – bpjoshi Jul 03 '18 at 11:24
1

Well. Here is a workaround. The easiest way is to assign display: block to your a element and then setup the clickable area with width & height in pixels. But setting fixed width and height can impact the responsive nature.

A more advanced and flexible way is to change a bit the HTML structure, so as the a will be inside the panel and then add display: block, but instead of setting the fixed width and height you can use percentiles so as the clickable zone inherits the size of the panel.

FIDDLE example with fixed sizes.

knitevision
  • 3,023
  • 6
  • 29
  • 44
  • It dosent work. I have added display block to the blocks, and still only clickable on the link – kristian Apr 22 '14 at 11:59
  • @kristian You should add ``display: block`` not to the blocks, but to the ``a`` element like this ``a {display: block;}`` and then add ``width: Xpx;`` and ``height: Ypx;`` to your ``a`` selector. It works both on your site and on the fiddle, check the code there, I am sure you misunderstood me. – knitevision Apr 22 '14 at 12:02
  • For some reason it worked now. I added a inside the block again. Thank you :) – kristian Apr 22 '14 at 12:03
  • @kristian but mind the possible problems regarding setting the fixed height and width for the elements. It can affect the responsive nature. It is more flexible to use percintiles for the cases like that. Play a bit with the HTML markup and styles, so as the ``a`` element inherits the width and height from the parent. – knitevision Apr 22 '14 at 12:05
  • Will do that. Thanks again :) – kristian Apr 22 '14 at 12:18
  • 1
    The answer from adius is far easier and works far better as well. You can even use the different button size classes to make the clickable area of the headers larger. – MattD Sep 26 '14 at 13:47