We Keep Coding

I need to achieve this using HTML, CSS and JavaScript - any help will be great

Do you wish to include designation in the e-form?
 Yes
 No
If they select Yes, the following question will appear,
Which you want to apply - (Check all that apply)
 He/ HimHim
 She /Her
 TheyThey They/TheirTheir
 Other (open(open (openfieldfield to typetype in )

This type of thing can be pretty easily achieved with jquery if that is an option for you, or even with plain javascript. A quick google search brought up this simple example that may help you: http://form.guide/html-form/html-checkbox-events.html You'll want to look at the sections on checkbox click events and on showing/hiding content on click.

How to add a link within a .html()

I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});

$('#text').html("<a href='someUrl'>Link</a>");
This should do it.

one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');

Jquery - set style for many select - Can I use ID instead of NAME?

I'm really new at jQuery and bootstrap, if anyone can help I would be very happy. What I want to do is to set the same style to many drop down-menus.
The code I have now is:
$("select[name='NameOfSelect']").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
Can I do like this instead and hit all drop downs?
$("select").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
If that's not possible can I target the select with ID instead of NAME, how would that look?

the code you wrote in the question works!
$("select").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
here is a demo:
http://jsfiddle.net/nn007/6EncE/

yes you can when you use $("select") it will used for all select tags
if you use
$("select.hello") it will be used only for all select tags with the hello class
$("select#hello") for all select with id hello

Try this way:
$('#select_id').selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});

Jquery - attach 2 objects to make a clickable link

Sorry in advance as I know how basic this question is but I'm struggling to find the answer to this.
I'm trying to connect two objects together, some text & a url and send them to a class.
The code I have that's working just fine is only using one of the objects at the moment;
$('.myclass').text(obj.mytext);
I'm stuck on how to attach the second object (obj.myurl) to this so it output's the text as a clickable link?

You shoule
$('.myclass').html('' + obj.mytext + '');
or
$('<a/>', { href : obj.myurl, text: obj.mytext }).appendTo('.myclass')

Try:
$('.myclass').text(obj.mytext).attr('href',obj.myurl);

How to add an HTML attribute with jQuery

Well, I have this jQuery image slideshow that uses the attribute "control" inside an <a>. Seeing how it didn't validate I searched for a way to add this attribute inside my HMTL via jQuery but I didn't really find anything relevant. Now I don't really care about how valid my page is, but I'm really curious in how to add an HTML attribute inside an HTML tag.
In case I wasn't clear enough with my explanation, I have this code:
<a id="previous" control="-6" href="#"></a>
And I want to add control="-6" with jQuery.

Use jQuery's attr function
$("#previous").attr("control", "-6");
An example
// Try to retrieve the control attribute
// returns undefined because the attribute doesn't exists
$("#previous").attr("control");
// Set the control attribute
$("#previous").attr("control", "-6");
// Retrieve the control attribute (-6)
$("#previous").attr("control");
See this example on jsFiddle
You can alternatively use data function to store values on elements. Works the same way, for example:
$("#previous").data("control"); // undefined
$("#previous").data("control", "-6"); // set the element data
$("#previous").data("control"); // retrieve -6
Using data you can store more complex values like objects
$("#previos").data("control", { value: -6 });
($("#previos").data("control")).value; // -6
See a data example on jsFiddle

Since the jQuery version has been well covered here, I thought I'd offer something different, so here a native DOM API alternative:
document.getElementById('previous').setAttribute('control','-6');
Yes, I know you asked for jQuery. Never hurts to know the native way too. :o)

Let me see if I understood you.
You have, for example, the code:
<a id="previous" href="#"></a>
And by jQuery you want it to be:
<a id="previous" control="-6" href="#"></a>
Is it right?
If it is. You just have to do:
$('#previous').attr('control', -6);
If an attribute doesn't exists it's created by jQuery.
So, to remove it you can do:
$('#previous').removeAttr('control');
What you're doing doesn't respect the html rules and everything else, but it works fine, a lot of plugins do the same. ;D
I hope this could be helpful!
See you!

Try this:
$('#previous').attr('control', '-6');
Why? the $.attr(); function of jQuery allows you to add, get or update attributes (class, id, href, link, src, control and everything else!).

$("#previous").attr("control", "-6");

HTML:
<a id="previous" href="#">...</a>
jQuery:
$('#previous').attr('control', '-6');

jQuery's attr will do that. Example:
$("#previous").attr("control", "-6");
Also check out this example at http://jsfiddle.net/grfSN/.