I've got a spoiler-code on my Homepage.
The Code looks like this:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial"
id="button"
title="Click to show/hide content"
type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {
document.getElementById('spoiler')
.style.display=''
}else{
document.getElementById('spoiler')
.style.display='none'
}">
Show hidden content
</a>
What I want to do now is quite simple:
After clicking on the element "button", the hidden content shall be shown and the anchor <a> shall become invisible.
So what I am looking for is:
onclick: if element "spoiler" is on display=none AND element "button" is on display=initial THEN the element "spoiler" shall change to display=initial AND element "button" shall change to display=none
Is this possible?
This code in jquery will solve your problem. I hope this is what you wanted.
$('#button').click(function() {
$('#spoiler').css('display', 'block');
$(this).hide();
});
I have demo here as well.
A JavaScript only solution will be as follows:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
document.getElementById('button').style.display='none'">Show hidden content</a>
Try following code. JSFiddle.
<div id="spoiler" style="display:none" onclick="this.style.display='none';">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';">Show hidden content</a>
display="initial" isn't a valid attribute. Also, putting all of that code in the onclick attribute prevents you from reusing the code in other spoiler blocks. The best solution is to use a script tag for separation of concerns and reusability.
Here's the bare-bones of what you need:
<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div>
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
document.getElementById(spoilerId).style.display='block';
buttonNode.style.display='none';
}
</script>
Related
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>
how are you guys I have a question if anyone can help me, I'll be grateful.
at the moment I was using some bootstrap functionality, for example, this code below.
I'm using bootstrap version 3
<div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>
this code works well in html file.
But when I use Jquery append element this doesn't work the same way
code using jquery append.
<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>
script tags
<script>
function addElement(){
let ElementToAdd = ` <div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
$('#addhere').append(ElementToAdd)
}
if someone tells me why this occurs I will be totally grateful
Take a look at this:
How to bind bootstrap tooltip on dynamic elements
In order to make a dynamically injected tooltip work, you must initialize a tooltip plugin using an element, which exists already after the page is loaded, e.g. body. It should then work.
A simple answer is Bootstrap = CSS + JS.
Try to hide element onload and when you need show.
I needs to hide a div when the aherf got clicked where I can't use script tag in it . So how can I do it.
<div class="alert">
<p class="alert_message">alert</p><br>
<div><a herf=""class="hide">close</a></div>
</div>
Help me in this....
You can setup the onclick event for the anchor element inline like this.
<div class="alert">
<p class="alert_message">alert</p><br>
<div>close</div>
</div>
My modal div is:
<div class="modal" id="showmodal"><!-- content here --> </div>
Now I am calling it with data-toggle='modal' following anchor is coming with DOM:
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
and its working.
Now when I appending another link from javascript like following
<a class data-toggle="modal" data-target="#showmodal">click </a>
It's not working. Can anybody tell why? Thanks in advance.
When you have added first a tag
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js knows on which element it need to attach model window event.
but when you dynamically appended
<a class data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js does not know the element exists in DOM.
so you need to manually call the js function to open model.
$('#showmodal').modal(options)
In your JS code.
Hope this helps.
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.