Hide and Show Text Code in Java. Hello I need some help completing this code for
ID: 3716995 • Letter: H
Question
Hide and Show Text Code in Java.
Hello I need some help completing this code for hide and show text using JavaScript. I have done a similar one in Jquery, but I need to do this in plain JavaScript without any button, the click has to be with the pointer over the “show more” words and “show more” and show less” after clinking over the words I had problems doing it in a simpler way using the div and id. I need to write a script in java that makes the htlm to change from hide to show and the other way around. that makes the text appear and disappear using the pointer. Could you please give me some guidance and help? Very Appreciated.
The final result has to be as follows:
Title
Product name $ cost
Image
Show More… ( On click over text it changes to Show Less… and show three lines of text) I have to use Java in the script to create the effect in the htlm of hide and show using the div and id.
Here is what I have so far:
JSJQ Assignment 5
Vitamins and Supplements Depot
Curcumin 95 - $20.99
Curcumin 95 protects against oxidative damage
Delivers 95% curcuminoids
500 mg per capsule
120 veg capsules
Not genetically modified
Vegan
Gluten free
Show More...
Other Ingredients: Cellulose, magnesium stearate (vegetable source) and silicon dioxide. Capsule consists of hydroxypropylmethylcellulose.
Usage: Take 1 capsule per day with food or as directed by your qualified healthcare professional
Note: If you have a medical condition, are pregnant, lactating, trying to conceive, under the age of 18, or taking medications, consult your healthcare professional before using this product.
Copyright© Vitamins and Supplements Depot
arrow Curcumin 95 500 120 DIETANT
Explanation / Answer
Here I Create Two File One Is demo.html and showmore.js you can make using one HTML file also but for more convenient we have to follow some developers rule.You use your image name eg.abc.jpg instead of chetan.jpg
demo.html
<html>
<head>
<script type="text/javascript" src="showmore.js"></script>
</head>
<body>
<div>
<p id="textArea">Vitamins and Supplements Depot <br>
Curcumin 95 - $20.99<br>
<img src="chetan.jpg"><br>
Curcumin 95 protects against oxidative damage
Delivers 95% curcuminoids<br>
500 mg per capsule<br>
120 veg capsules<br>
Not genetically modified<br>
Vegan<br>
Gluten free</p>
</div>
<a id="toggleButton" href="#">See More</a>
</body>
</html>
And JavaScript File is Follows
showmore.js
var status = "less";
function toggleText()
{
var text="Other Ingredients: Cellulose, magnesium stearate (vegetable source) and silicon dioxide. Capsule consists of hydroxypropylmethylcellulose.Usage: Take 1 capsule per day with food or as directed by your qualified healthcare professionalNote: If you have a medical condition, are pregnant, lactating, trying to conceive, under the age of 18, or taking medications, consult your healthcare professional before using this product.";
if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}
Hope it will help you
i try to upload pic but due to some url issue it having problem thanks.......
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.