We Keep Coding

Toggle div should hide first

I am doing a CRUD and trying to use some Javascript/JQuery. I have button "Add" where if it is clicked the div will be shown, I've done this part but the div already showed before you click the add button
Question: How can I hide first the div if it is not yet clicked?
My View
<button class="btn btn-success" id="add-user">Add</button>
<div id="myDiv">
<form id="my-form">
...
</form>
</div>
My JS
$('#add-user').click(function(){
$('#myDiv').toggle();
});

Add in your css
myDiv {
display: none;
}
This will make the initial render to hide your div

Adding to what #amine-ramoul & #iagowp said, using JQuery
try
$('#add-user').on('click', function(){
$("#myDiv").show();
});
And
style="display: none"
is the correct syntax.

juste add display none like this :
<div id="myDiv" style="display:none">
<form id="my-form">
...
</form>
</div>

jQuery DataTables append div to specific place

I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.

You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());

Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');

Hide previous div onclick

I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?

Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});

If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example

Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.

PrettyPhoto inline Content div hide show

I have a problem with PrettyPhoto
in inline content there is two div and one button.I want that when I clickedn button divisionImage will hide and divisionVideo will show. here is a codes inline content and div hide show function not working
<div id="inline-content" class="hide" style="text-align: center;">
<input id="btn1" type="button" name="btnCzmVideo" value="Çözüm Videosu"
onclick="VideoGoster()" />
<div id="divisionImage" style="text-align: center;">
<img id="imgCozumIcerigi" src="#" />
</div>
<div id="divisionVideo" style="display: none;">
</div>
</div>
function VideoGoster() {
$("#divisionImage").css('visibility', 'hidden');
$('#divVideo').show();
}

Problem Solved
actually divs hided and showed but u cant see
in prettyphoto modal when press right arrrow PrettyPhoto Content refreshed and your divs is hided and showed what you wanted.
send right arrow key or left arrow key to page programatically and problem was solved

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});

It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!