Show div on checkbox tick

Question

I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:

https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa

html:

    <form method="post" autocomplete="off">
                <div class="row resetpword">
                    <div class="container-fluid addblog"style="margin-
    top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
                    <div class="container-fluid" style="margin-left:37px;">
                        <label>
                            First Name<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" 
    name="firstname" />
                    </div>
                    <div class="container-fluid" style="margin-left:35px;">
                        <label>
                            Last Name<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" 
    name="lastname" />
                    </div>
                </div>
                <div class="row resetpword" style="margin-top:0;">
                    <div class="container-fluid" style="margin-left:10px;">
                        <label>
                            Email Address<span class="req">*</span>
                        </label>
                        <input type="email" required autocomplete="off" 
    name="email" />
                    </div>
                </div>
                <div class="row resetpword" style="margin-top:0;">
                    <div class="container-fluid">
                        <label>
                            Set A Password<span class="req">*</span>
                        </label>
                        <input type="password"required autocomplete="off" 
    name="password"/>
                    </div>
                </div>
                <div class="container-fluid resetpword countrydropdown" 
    style="margin-top:0;margin-left:-15px;"> 
                    <label>
                        Country of origin<span class="req">*</span>
                    </label>
                    <select>
                        <option value="AF">Afghanistan</option>
                        <option value="AX">Åland Islands</option>
                    </select>
                </div>
                <div class="container-fluid resetpword" style="margin-top:0;">
                    <label>
                        Are you a blogger?<span class="req">*</span>
                    </label>
                    <input type="checkbox" name="check1" id="blogger"/>
                </div>
                <div class="addblog"><p>sausage</p></div>
                <button type="submit" class="resetb button button-block" 
    name="register">Register</button>
   </form>

js:

jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
    jQuery(".addblog").show(300);
}
else {
    jQuery(".addblog").hide(300);;
}
});

Answer 1

Post the js code after document.ready and don't forget to add jquery link

Updated fiddle

/*!
* can yo u solve my issue? :) I don't understand why it won't wor
 */
 $(document).ready(function(){
jQuery("#blogger").change(function() {
    if($(this).is(":checked")) {
        jQuery(".addblog").show(300);
    }
	else {
        jQuery(".addblog").hide(300);;
    }
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
				<div class="row resetpword">
					<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
					<div class="container-fluid" style="margin-left:37px;">
						<label>
							First Name<span class="req">*</span>
						</label>
						<input type="text" required autocomplete="off" name="firstname" />
					</div>
					<div class="container-fluid" style="margin-left:35px;">
						<label>
							Last Name<span class="req">*</span>
						</label>
						<input type="text" required autocomplete="off" name="lastname" />
					</div>
				</div>
				<div class="row resetpword" style="margin-top:0;">
					<div class="container-fluid" style="margin-left:10px;">
						<label>
							Email Address<span class="req">*</span>
						</label>
						<input type="email" required autocomplete="off" name="email" />
					</div>
				</div>
				<div class="row resetpword" style="margin-top:0;">
					<div class="container-fluid">
						<label>
							Set A Password<span class="req">*</span>
						</label>
						<input type="password"required autocomplete="off" name="password"/>
					</div>
				</div>
				<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;"> 
					<label>
						Country of origin<span class="req">*</span>
					</label>
					<select>
						<option value="AF">Afghanistan</option>
						<option value="AX">Åland Islands</option>
					</select>
				</div>
				<div class="container-fluid resetpword" style="margin-top:0;">
					<label>
						Are you a blogger?<span class="req">*</span>
					</label>
					<input type="checkbox" name="check1" id="blogger"/>
				</div>
				<div class="addblog"><p>sausage</p></div>
				<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>

Answer 2

you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..

Answer 3

looking at your example it seems that your were missing the jquery library as well as some html changes