Show a new div on click
<div id="box1">abc</div>
<div id="box2" style="display:none;">awklnnbc</div>
<div id="box3" style="display:none;">wgweilwe</div>
<div id="box4" style="display:none;">vwfweifu</div>
<div id="box5" style="display:none;">xvwervwe</div>
<div id="box6" style="display:none;">gwevw</div>
<button>Show Another Div</button>
after clicking on show another div
<div id="box1">abc</div>
<div id="box2" style="display:none;">awklnnbc</div>
<div id="box3" style="display:none;">wgweilwe</div>
<div id="box4" style="display:none;">vwfweifu</div>
<div id="box5" style="display:none;">xvwervwe</div>
<div id="box6" style="display:none;">gwevw</div>
<button>Show Another Div</button>
a new div will be appearing on every click.
hope you understand now.
Only box1 will be visible first. rest of them hidden. different content on different div.
If you someone click on show another div, a new div will be showing.
is it possible?
This has a good answer for your problem I believe: http://csscreator.com/node/708
If you want do dynamically add a new div you should just try appending it to the content:
The HTML:
<div class="container">
<div id="content">
</div>
<button id="showNewDiv">SHOW ANOTHER DIV</button>
</div>
The Javascript (assuming you are using jQuery)
$("#showNewDiv").on("click", function(e){
$("#content").append("<div/>", {text: "whatever"});
});
Related
Would be very easy to embed the missing div container in the html ...if I only could add it. I'm limited to "jimdo's" head area to manipulate classes and id's from there. Code is already written but it seems to me the only way that works is to do that with jQuery or Javascript?
So, I have this code here:
<div id="1" class="2">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
And the missing div container in the html <div class="margin"> needs to be under the first div container from top <div id="1" class="2"> added by its id #1 and then surrounds the rest code below into the new added <div class="margin">
Like this:
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Is it possible to add it like that with jQuery or javascript? If so, maybe someone could show me how to implement this?
You can try $.before() to append the <div class="margin"> before the target:
const $container = $("#cc-m-7032876518");
$container.before(`<div class="margin">`);
You can try this with jquery.
let children = $("#1").clone().children().wrap( "<div class='margin'></div>" );
$("#1").empty().append(children);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
I have multiple rows
<div class="row" id="move-data-row0"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
I want only the first three to be shown and on a button click 3 more should appear.
My first thoughts were to give every div the same classname with an index but I do not know how the JavaScript should be implemented.
I started by trying to hide one div, but that doesn't really work
$("#move-data-row0").children().prop('disabled',true);
You can use this minimal example, or improve it to get what you really want:
HTML:
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<button>More</button>
JavaScript:
$(document).ready(function(){
$('.row:gt(2)').hide();
$('button').click(function(){
$('.row:hidden:lt(3)').show();
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/e0ppjwnm/
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()
I have a div with two divs inside that I want div A to show, with the other hidden. by default I want div A to show
<div id="0">
<div id="A">this is A</div>
<div id="B">this is B</div>
</div>
<div id="1">
<button1>this is 1</button>
<button2>this is 2</button>
</div>
Separate to this is the buttons to action it.
Here is where I got with the javascript:
$(document).ready(function() {
$('.toggle').hide();
$('a.togglelink').click(function() {
$('.toggle').hide();
$(this).parent().next('.toggle').toggle();
return false;
});
});
EXAMPLE
HTML
<div>
<div id="divA" class="toggle">this is A</div>
<div id="divB" class="toggle">this is B</div>
</div>
<div>
<button value="divA">this is 1</button>
<button value="divB">this is 2</button>
</div>
JavaScript
showHideDivs("divA");
$("button").on("click", function(){
showHideDivs(this.value)
});
function showHideDivs(id){
$(".toggle").hide();
$("#" + id).show();
}
Edit: #ShowcaseImagery - I realized that this question was asked specifically for bootstrap and that my solution is more of a JS/jQuery implementation. If you need similar functionality and you're using bootstrap you should look into the collapse accordions. The collapse documentation should outline how to do this correctly.
div0 and div1 is not valid XHTML. I'm guessing that's where your problem is. Instead use the id tag like so:
<div id="div0">YOUR STUFF HERE</div>
<div id="div1">MORE STUFF HERE</div>
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..