Develop Reference

is there a better way to render div boxes in javascript/jquery? Im following this method but i get a lot of errors

Try:
function render_my_div(){
var div_content = `<div class="firstDiv"><div id="close"></div><div class="secondDiv">
<p>Test Div</p></div></div>
`;
$("#render").html(div_content);
}
$('body').on('click', '.close', function(){
$(".firstDiv").remove();
$("#div_script").remove();
}
And the HTML:
<button id="myBtn">Button</button>
<div id="render"></div>
<script type="text/javascript">
const background,color,text;
$(".firstDiv").resizable().draggable();
</script>
This seems to be working fine #Mahmoud-Mostafa. But im using jquery UI so that i can implement drag and resize
This dosen't seem to be working at all :(...
PS: I'm sorry if i have not edited/updated my question properly as im new to stackoverflow

Try:
function render_my_div(){
var div_content = `<div class="firstDiv"><div id="close"></div><div class="secondDiv">
<p>Test Div</p></div></div>
`;
$("#render").html(div_content);
}
$('body').on('click', '.close', function(){
$(".firstDiv").remove();
$("#div_script").remove();
}
And the HTML:
<button id="myBtn">Button</button>
<div id="render"></div>
<script type="text/javascript">const background,color,text;</script>

I fixed the problem!
$("#myBtn").click(function(){
render_my_div();
$('head').append('<script id="div_interaction" type="text/javascript">$(".firstDiv").resizable().draggable();</script>');
});

Trying to add click event on the prepend element:

Trying to redirect to different page on click of image
$('.grid').prepend('<div id="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><img id="test" src="#somesource"></div>');
Tried the below code:
$('.grid').on('click', '#test', function() {
alert("test"); //It didnt work.
});

Maybe something like this:
$('.grid').on('click', window.location.href = 'page_url');

First you've to use class insted of id , (semantically error when same id for multiple element )
also to redirect to your page when clicking on the image ,
first prevent default action when click on the grid , so it wont redirect when clicking on link directly .
then get the link of the a parent tag image and perfom redirect programticly using $(this).parent("a").attr("href"); window.location.href
See below snippet :
$('.grid').prepend(
'<div class="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><img class="test" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShuHaRYzsoiz_KpVL5Ite65oK_ILy3p1b5vrZ996D1HFKdAS64"></div>');
$('.grid').on('click', '.test', function(e) {
e.preventDefault();
var urlRedirect = $(this).parent("a").attr("href");
console.log("redirecting to ..."+ urlRedirect);
// this will redirect after 2 sec
setTimeout(function(){
window.location.href = urlRedirect;
},2000)
});
.test {
width:20px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"></div>

Edited
I think you just create multiple same ID elements.
Change using ID to class, it should work fine.
Edited
Modified base on asker's comment
$('.grid').each(function(event){
if($(this).find('.test').length > 0) return false;
var _html = '<div style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a class="link" href="'+$(this).data('url')+'"><img class="test" src="'+$(this).data('image')+'"></a></div>';
var new_node = $(_html);
$(this).prepend(new_node);
new_node.find('.test').click(function(event){
event.preventDefault();
alert($(this).attr('src'));
// redirect here
// window.location.href = $(this).parent().attr('href');
})
})
.grid{
width:40px;
height:40px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid" data-url="x.x.x" data-image="http://x.x.x"></div>
<br/>
<div class="grid" data-url="y.y.y" data-image="http://y.y.y"></div>
<br/>
<div class="grid" data-url="z.z.z" data-image="http://z.z.z"></div>
<br/>
<div class="grid" data-url="a.a.a" data-image="http://a.a.a"></div>

jquery slideToggle opens all divs instead of just the div that is required

I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>

(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})

After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.

Hiding a button on click

Trying to hide a button on click using Bootstrap/JavaScript. Here is my button code:
I understand
Here is my script:
<script type="text/javascript">
function hidebtn(){
document.getElementById('menu-toggle').style.display = 'none';
}
</script>
It isn't working, any thoughts? Thanks!

Try it with jQuery:
function hide(){
$( "#button" ).addClass( "hide" );
}
HTML & CSS:
<a id="#button" onClick="hide()">Button</a>
#button.hide {
display: none;
}

function hideBtn()
{
document.getElementById('menu-toggle').style.display = 'none';
}
I understand

What code do i need to collapse a div when another is open?

i use a simple bit of code to make a div collapse, this is it:
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none")?"":"none";
}
//-->
</script>
what code do i add to make it recognise when one div is open an collapse the previous div?here's the link I'd use:
Link 1
<div id="div1" width="300px" style="display:none"></div>
Any ideas?

This is something jQuery works really well for. Here is a working example in jsfiddle.
http://jsfiddle.net/mrtsherman/uqnZE/
Example html
<div class="category">A
<div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
<div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
<div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>
And the code:
$(".category").click( function() {
$(".artists").hide();
$(this).children(".artists").show();
});
Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.

If you were willing to use jQuery, the selector of your interest is something along the lines of
$('div#parent-container > div').filter(':visible');
For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)
Something to mess with:
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
$toggle.show();
}
});
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Show Item Four
<div>
<div id="item-1">One</div>
<div id="item-2">Two</div>
<div id="item-3">Three</div>
<div id="item-4">Four</div>
<div id="item-5">Five</div
<div id="item-6">Six</div>
</div>
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}