I have this code in the body of my HTML which acts as a show/hide button and it is styled via CSS. However I only have the option to title the button once i.e 'Read more.." but after the button has been selected I would like it to change to 'Read less'. Here is the code I am using:
<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'}">Read more...
</button>
Any help would be greatly appreciated, thanks in advance.
Try:
HTML:
<button title="Click to show/hide content" type="button" onclick="func()" id="but">Read more...</button>
<div id="spoiler" style="display:none">TEXT TEXT TEXT</div>
JS:
function func(){
if(document.getElementById('spoiler') .style.display=="none"){
document.getElementById('spoiler').style.display="block";
document.getElementById('but').innerHTML="Read less...";
}
else{
document.getElementById('spoiler').style.display='none';
document.getElementById('but').innerHTML="Read more...";
}
}
DEMO
Firstly, get out of the habit of bundling JavaScript inline as HTML attributes. Look into DOM-scripting centrally from your JS scripts rather than in your HTML.
The essence of what you need to do is to query something each time the button is clicked, and act accordingly. The visibility of the spoiler area, for example.
(Note, you will need to give your button an ID, e.g. mybutton, for this:)
document.querySelector('#mybutton').addEventListener('click', function() {
var
spoiler = document.querySelector('#spoiler'),
showing = spoiler.style.display != 'none';
spoiler.style.display = showing ? 'none' : 'block';
this.textContent = 'Read '+(showing ? 'more' : 'less');
}, false);
So on click, we interrogate the display style of #spoiler. If it's showing, we hide it, and if it's hidden, we show it, updating the button text accordingly.
HTML:
<button id="btn" title="Click to show/hide content" type="button" onclick="readmore()">Read More...</button>
<div id="spoiler" style="display:none">spoiler text</div>
JS:
function readmore(){
var btn = document.getElementById('btn');
var spoiler = document.getElementById('spoiler');
if(spoiler.style.display=='none') {
spoiler.style.display = '';
btn.innerHTML = "Read Less ...";
} else {
spoiler.style.display = 'none';
btn.innerHTML = "Read More ...";
}
}
Here is a DEMO at jsFiddle.
Related
I have a disabled button and i want it to show a tooltip but change it when i enable it again. How do i get this to work i can only use HTML, javascript and css.
This is the button
<div class="right-item"><button class="button ripple" id="print" onclick="printDiv('qr-code')" disabled="disabled">Drucken</div>
Use title
function toggle() {
var button = document.getElementById('button');
if (button.disabled) {
button.disabled = false;
button.setAttribute('title', 'Enabled title');
} else {
button.disabled = true;
button.setAttribute('title', 'Disabled title');
}
}
<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>
<button disabled title="Hello">Hover on me</button>
This code will show same tool tip for both disabled or enabled button. Have a function which checks the status of button and apply the title value based on it.
You need to add Javascript when you enable button.
In jQuery:
$('#yourElementId').attr('title', 'your new title');
In Javascript:
var myBtn= document.getElementById("yourElementId");
myBtn.setAttribute('title','mytitle');
I have a textarea for the user to type something and it has a cancel and a submit button as part of it.
How can I make it so that the cancel and submit button only appears when the user clicks inside the textarea? (using javascript, no jquery please)
I have attempted using this javascript function:
function setButtons(writingtext) {
if (writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}
else {
document.getElementById('cfm').style.display = 'none';
document.getElementById('cancel').style.display = 'none';
}
}
When the user clicks the text area, it would be onClick="setButtons(True)" -> displays the buttons.
I'm not sure if this is the right approach here. Sorry, really new to this.
Any help would be appreciated!
You have control over your html you can do it with just css sniping the next sibling at :focus like this:
div {display:none;}
textarea:focus + div {display:block;}
<textarea name="" id="" cols="30" rows="10"></textarea>
<div>
<input type="submit">
<input type="submit">
</div>
This is only a simple example to show the buttons on focus. If you want to hide them, I think you will be able to manage that solution.
If all you want to do is show the buttons when the text area is focused, use the CSS-only solution. However, I'm guessing you'll want to keep them for a bit or do some extra pre-processing before the submit, in which case you should use the javascript option.
document.querySelector("#textarea").addEventListener("focus", function() {
document.querySelector("#submit").style.display = "block";
document.querySelector("#cancel").style.display = "block";
});
button {
display: none;
}
<textarea id="textarea"></textarea>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
You can just assign an id to the textarea for example text and then use
document.getElementById('text').addEventListener('focus', function(){
document.getElementById('cfm').style.display = 'block'
document.getElementById('cancel').style.display = 'block'
})
// Hide when blur (when not focused)
document.getElementById('text').addEventListener('blur', function(){
document.getElementById('cfm').style.display = 'none'
document.getElementById('cancel').style.display = 'none'
})
You should use
onfocus="setButtons(this)" instead of onClick
function setButtons(writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}
I am trying to create a show/hide toggle that is used multiple times per page. I believe the script I am using is working, but I would like it to also change the text of the link being clicked from "Read More" to "Read Less".
I have tried my best to sift through several many different posts on the website, but I just can't seem to figure out the changing text part. I've tried different variations of code, but none of them seem to do both of the tasks above.
function toggleRead(id) {
var toggle = document.getElementById(id);
if (toggle.style.display == 'block') {
toggle.style.display = 'none';
} else toggle.style.display = 'block';
};
<div style="display: none;" id="post-1">
<p><strong>Hidden</strong> text inside this div container<p>
</div>
<p><a class="question" onclick="toggleRead('post-1')">Read More</a></p>
<div style="display: none;" id="post-2">
<p><strong>Hidden</strong> text inside this div container<p>
</div>
<p><a class="question" onclick="toggleRead('post-2')">Read More</a></p>
I would really appreciate it if someone could figure out how to change the text of the toggle link from "Read More" to "Read Less" and vice versa whenever it is clicked while maintaining the current functionality.
You also need to reference the toggle links, in order to change its text as well.
I would write the whole thing in a different way, but to stick to your code, you can change it to also reference the "Read more" / "Read less" link:
function toggleRead(id, triggeringLink) {
var toggle = document.getElementById(id);
if (toggle.style.display == 'block') {
toggle.style.display = 'none';
triggeringLink.innerHTML = 'Read More';
} else {
toggle.style.display = 'block';
triggeringLink.innerHTML = 'Read Less';
}
}
<div style="display: none;" id="post-1">
<p><strong>Hidden</strong> text inside this div container</p>
<p></p>
</div>
<p><a class="question" onclick="toggleRead('post-1', this)">Read More</a></p>
<div style="display: none;" id="post-2">
<p><strong>Hidden</strong> text inside this div container</p>
<p></p>
</div>
<p><a class="question" onclick="toggleRead('post-2', this)">Read More</a></p>
Hope this helps.
If you want to change the inner text also, then just add this code according to your conditions.
add Id for each read more tag
document.getElementById('readmore').innerText='readless';
I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>
Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}
After checking some related questions, couldn't find any good answers.
I have created 2 different charts(with Chart.js). And I have 2 buttons (btn1 and btn2), when clicked on btn1, I want to display the 'languageSkillchart'. However when clicked on btn2 then it should display 'programmingSkillchart'.I have tried in several ways but I am only getting the language skill chart even when i clicked btn2.
Your help would be greatly appreciated.
Both Of my Charts in same page:
In my CV.html, I have two Buttons
<div id="chartButton" class="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div id="chartButton" class="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>
//have added the script
<script src="js/showAndHideSkills.js"></script>
MySkillChart.html page
<div id="langchartcontainer" class="Chartcontainer">
<canvas id="languageSkillsChart"></canvas>
</div>
<!--The hidden Programmingskill div, -->
<div id="codechartcontainer" class="Chartcontainer" style="display: none">
<canvas id="codingSkillsChart"></canvas>
</div>
showAndHideSkills.js
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var langchartcontainer = document.getElementById("langchartcontainer");
var codechartcontainer = document.getElementById("codechartcontainer");
//alternative: 1
/*btn1.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
langchartcontainer.style.display = 'block';
});
btn2.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
codechartcontainer.style.display == 'none';
codechartcontainer.style.display = 'block';
});*/
//Alternative: 2
/*if(btn1.onclick(window.open('mySkillsChart.html', '_blank'))){
codechartcontainer.style.display == 'none';
langchartcontainer.style.display = 'block';
}else if (btn2.onclick(window.open('mySkillsChart.html', '_blank'))){
langchartcontainer.style.display = 'none';
}
}*/
//Alternative: 3
$(document).ready(function(){
$("#btn1").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#langchartcontainer").slideToggle("fast");
$("#codechartcontainer").hide("fast");
});
$("#btn2").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#codechartcontainer").show("fast");
$("#langchartcontainer").hide("fast");
});
});
[1]: https://i.stack.imgur.com/7OZ1K.png
The output I get is:
Option 1:
By opening new window you could open 2 different html files (langchartcontainer.html and codechartcontainer.html) instead of just only one and put images in their own html file:
$(document).ready(function(){
$("#btn1").click(function(){
window.open('langchartcontainer.html', '_blank');
});
$("#btn2").click(function(){
window.open('codechartcontainer.html', '_blank');
});
});
Option 2:
If you definitely want to use only one html file to open you need to pass a variable in order to dictate which image is shown in the external html. Because you can't control with javascript what happens in a different file:
something like:
window.open('mySkillsChart.html?whichImagetoShow=A', '_blank');
And in the external html mySkillsChart.html you need to insert a different javascript code in order to read the variable whichImagetoShow and do show/hide code inside of that page.
3) You want to show the images in same page with the one which you paste code above (CV.html), than don't use open window code, just show/hide but you need to have the images displayed in same page.
If you're using window.open() it will put your MySkillChart.html page in a new document, meaning you won't be able to access it from the your CV page. To have access to it from there you would need to put it into an iframe or container on your CV document.
So your CV.html would be something like:
<div class="chartContainer"></div">
<div>
<button class="lang">Click Me!</button>
</div>
<div>
<button class="code">Click Me!</button>
</div>
<script>
$.get('MySkillChart.html').done(charts=> {
$(charts)
.appendTo('.chartContainer')
.find('.Chartcontainer')
.hide();
})
$('button')
.on('click', ()=> $('.Chartcontainer').hide())
.on('click', '.code', ()=> $('.codechartcontainer').show()
.on('click', '.lang', ()=> $('.langchartcontainer').show());
</script>
It seems that you need to "switch" values on your html buttons divs:
<div class="chartButton" id="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div class="chartButton" id="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>