CODEWITHSUNDEEP
csshtmlradio-button
Tim Vahlbrock
Tim Vahlbrock

Reputation: 113

Activate Label and Link with one click

I want to make one click activate both, label and link, because my menu works with links and moves to the correct point of the page, but the label has to activate the button which makes the content enlarge and close the menu. I tried it with:

<label for="thebutton"><a href="#boxwithcontent">Click me</a></label>

But that only activates the link or the label (if the label area is bigger). See what i mean here.

Probably the hardest problem will be that I don´t want to use jquery.

I think a possibility would either be to control the scroll via radio buttons or control the radio button via the link, but I can´t find any way to do that.

Thanks for any efforts

Tim

Upvotes: 1

Views: 2361

Answers (2)

bert bruynooghe
bert bruynooghe

Reputation: 3093

Technically not a link, but with some styling it might boil down to the same:

<form action="#boxwithcontent" method="get">
  <label>test<button type="submit">Click me</button></label>
</form>

If you have several of them, you might use one form, and use the formaction attribute on the button...

Upvotes: 0

Chris W.
Chris W.

Reputation: 23270

I may be misunderstanding your intention but you might just try something like this instead.

Using your HTML with a quickie edit;

<label for="magicbutton">Click Me</label>
<input id="magicbutton" type="checkbox" onclick='window.location.assign("#field")'/>

<div id="field"><p>
magic text
</p></div>

and your CSS with a quickie edit;

#field{
    display:none;
    position:absolute;
    top:100%;
}

input {float: left;}

input#magicbutton:checked ~ #field{
    display:block;
}

...and a fiddle https://jsfiddle.net/L2ywu2ta/

I didn't change much, hope it helps. Cheers.

Upvotes: 3

Related Questions