show/hide content on click with js by id?

[philipca]

As suggested by Shikkediel, I have put my question into this new thread:

I have added “by id” to the title, because I’m guessing that “CHANGE 1” involves changing the JS to make the ‘reveal’ dependent upon ‘id’.
= = = = = = = = = =
My name is Philip Caplan and I read the article:
https://css-tricks.com/exposing-form-fields-radio-button-css/
and used what I could see to create a small demo of an idea that I was trying to prototype which needs a form of the ‘reveal’ idea described.

Can you help me (as a very, very beginner in this stuff!) to get the 2 Changes described below to my code.

A demo that I have been able to put together can be seen at http://codepen.io/philipca/pen/PpbQxv

What the demo does now: clicking the “TEXT” radio button in the group works mostly as I want it to:
— it reveals a ‘second row’ of 4 radio buttons (Heading/Sub-heading/Intro para/Normal para) with beneath that a textarea.

At present, selecting the other 3 radio buttons (IMAGE/LINK/BUTTON) produces the same ‘second row’ as TEXT.

(CHANGE 1) I want to have a different ‘second row’ to be revealed when each of IMAGE, LINK or BUTTON is selected.

(CHANGE 2) At present, the textarea is revealed at the same time as the ‘second row’.

I want the textarea NOT to appear until a selection is made from the ‘second row’, at which time it is revealed in a ‘third row’.

Note: there won’t always be 4 radio buttons in each row: sometimes there may be more or less.
And sometimes there may be some radio buttons as a ‘third row’ with a textarea or some other input as a ‘fourth row’.

[Beverleyh]

I’m not really sure what you’re asking. The reveal method is currently done using the checkbox hack in CSS. Are you saying that you want to convert from CSS to JS for your reveal method (as per your title)?

The JS from the demo is for identifying/marking required fields but doesn’t make the reveal happen, so I’m not sure how this fits in with your own project, or if you need it at all.

It sounds like you need to research more about using the checkbox hack so that you understand fully how it works. You should also review your use of selectors, particularly the general sibling selector “~”, and also the adjacent sibling selector “+”, as they both tend to be used with the checkbox hack, along with ids, for greater specificity (i.e. to target elements to reveal more specifically/independently).

[Author]

Posts