We Keep Coding

How can I make a "read-more" button for mutiple text elements?

I have multiple images on my website with some text about each image.
<div>
<h2>I still get butterflies</h2>
<p>
A virtuoso display of personality. A sophisticated layered piece that depicts dynamism and vibrancy while also betraying the turmoil and tranquility of humanity. The artist’s ode to the enduring Metamorphosis of an individual and so
much more.
<span id="text">
<br />
The artist’s personality is on full display. A breathtakingly beautiful piece; full of energy, light, sorrow, and pain. The artist’s vision will shake you to the very core. This hauntingly post-modernist piece is an exercise in
raw emotion on canvas; that demands the full attention of the viewer. It is a raw un-tempered glimpse into the fabric of humanity. The vibrancy of colors harmoniously interact with the chaotic themes on display. This artwork
pulls you in, what message you see in it, what themes you feel the artwork depict are entirely up to you. It will touch everyone differently. You and your guest will see a part of you depicted on the painting, a facet of your
life laid bare.
<br />
"I still get butterflies" is a fascinating portrayal of humanity. The dance of colors, the vibrant display of personality and the chaotic themes on display perfectly gel together to depict the elegance and the reality
of existence.
</span>
</p>
<button id="toggle" class="astext">Read More</button>
</div>
<div>
<h2>To levitate</h2>
<p>
"To levitate" is a thoughtful, emotional piece that transcends the fabric of reality. This piece appeals directly to the senses, beneath the incessant and formidable dance of colors is a rapturous delight. Ecstasy, so
profound, so pure that it borders on angelic transformation.
<span id="text">
<br />
"To levitate" is at its heart a deeply disquieting and disturbing display of strange nature that is at once entirely realistic and yet almost supernatural. It conveys a message of self-realization and self-acceptance:
to break free from the chaos of life. The artist portrays a dazzling song that is beautifully pure. "To levitate" is a majestic creation of colors. It betrays the indefinable aroma of the artist&apos;s sincerity to
their vision and intercourse with reality. The message of the piece transcends reality, borders on the supernatural, yet within that artistic expression is perhaps the most human message of all.
<br />
"To levitate" is a deeply feverish piece. At first glance the piece conveys a sense of chaos; it blends the supernatural with reality, but beneath all that chaos lies the harmony of colors, the artist&apos;s intention,
and a beautifully sublime message.
</span>
</p>
<button id="toggle" class="astext">Read More</button>
</div>
<div>
<p>January 14<sup>th</sup>, 2021</p>
<img data-src="./images/portfolio/5524E4534A898F56064C481CD305C703.webp" class="lazyload" alt="my image" />
</div>
The access text is hidden with css #text {display: none;}
Alongside with the HTML & CSS goes JS/jquery code to show the rest on the buttonclick
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Read More") {
//Stuff to do when btn is in the read more state
$("#toggle").text("Read Less");
$("#text").slideDown();
} else {
//Stuff to do when btn is in the read less state
$("#toggle").text("Read More");
$("#text").slideUp();
}
});
});
Is there a way to show the text according to what button was clicked, without having a seperate script for each?

First of all, use classes instead of IDs in this case. Having multiple elements with the same ID is a big no-no. Then, make the use of jQuery's $(this), along with the sibling and children selectors, to get what you want. $(this) selects only the element you just clicked, and siblings/children will only target the text elements that are directly related to that button within the same div. This Codepen has a live demo.
HTML:
<div>
<h2>I still get butterflies</h2>
<p>
A virtuoso display of personality. A sophisticated layered piece that depicts dynamism and vibrancy while also betraying the turmoil and tranquility of humanity. The artist’s ode to the enduring Metamorphosis of an individual and so
much more.
<span class="text">
<br />
The artist’s personality is on full display. A breathtakingly beautiful piece; full of energy, light, sorrow, and pain. The artist’s vision will shake you to the very core. This hauntingly post-modernist piece is an exercise in
raw emotion on canvas; that demands the full attention of the viewer. It is a raw un-tempered glimpse into the fabric of humanity. The vibrancy of colors harmoniously interact with the chaotic themes on display. This artwork
pulls you in, what message you see in it, what themes you feel the artwork depict are entirely up to you. It will touch everyone differently. You and your guest will see a part of you depicted on the painting, a facet of your
life laid bare.
<br />
"I still get butterflies" is a fascinating portrayal of humanity. The dance of colors, the vibrant display of personality and the chaotic themes on display perfectly gel together to depict the elegance and the reality
of existence.
</span>
</p>
<button class="toggle astext">Read More</button>
</div>
<div>
<h2>To levitate</h2>
<p>
"To levitate" is a thoughtful, emotional piece that transcends the fabric of reality. This piece appeals directly to the senses, beneath the incessant and formidable dance of colors is a rapturous delight. Ecstasy, so
profound, so pure that it borders on angelic transformation.
<span class="text">
<br />
"To levitate" is at its heart a deeply disquieting and disturbing display of strange nature that is at once entirely realistic and yet almost supernatural. It conveys a message of self-realization and self-acceptance:
to break free from the chaos of life. The artist portrays a dazzling song that is beautifully pure. "To levitate" is a majestic creation of colors. It betrays the indefinable aroma of the artist&apos;s sincerity to
their vision and intercourse with reality. The message of the piece transcends reality, borders on the supernatural, yet within that artistic expression is perhaps the most human message of all.
<br />
"To levitate" is a deeply feverish piece. At first glance the piece conveys a sense of chaos; it blends the supernatural with reality, but beneath all that chaos lies the harmony of colors, the artist&apos;s intention,
and a beautifully sublime message.
</span>
</p>
<button class="toggle astext">Read More</button>
</div>
<div>
<p>January 14<sup>th</sup>, 2021</p>
<img data-src="./images/portfolio/5524E4534A898F56064C481CD305C703.webp" class="lazyload" alt="my image" />
</div>
JS:
$(document).ready(function() {
$(".toggle").click(function() {
var elem = $(this).text();
if (elem == "Read More") {
//Stuff to do when btn is in the read more state
$(this).text("Read Less");
$(this).siblings().children('.text').slideDown();
} else {
//Stuff to do when btn is in the read less state
$(this).text("Read More");
$(this).siblings().children('.text').slideUp();
}
});
});

It looks like you are using jQuery already. You might want to consider using the toggle() function, which is just for this purpose:
https://www.w3schools.com/jquery/eff_toggle.asp
$("#toggle").click(function(){
$("#text").toggle();
});

show the content on the right hand side

Here in the demo shown http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview i'm facing two issues which can be resolved using simple css/bootstrap code.
Below are the issues i am facing.
1) I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.
2)And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
html code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div ng-controller="MainCtrl">
<div class="workspace">
<div class="sidebar-wrap">
<h3>Click below options:</h3>
<div class="sidebar-contents">
<a class="nav clearfix"
ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
ng-class="{ 'active' : showOsPackages }">
OS Packages
</a>
<p>
<a class="nav clearfix"
ng-click="optionTwo=!optionTwo; showOsPackages=false"
ng-class="{ 'active' : optionTwo }">
Option Two
</a>
</p>
</div>
</div>
<div class="" ng-show="showOsPackages">
<h1>OS Packages</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
<div class="" ng-show="optionTwo">
<h1>Option Two</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
</div>
</div>
</div>
</div>
js code:
var app = angular.module('plunker', ["ngAnimate"]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'slideout steeze';
});
Any suggestions would be helpful.

I checked your code. Here are the corrections.
I am trying to show the content on the right side when user click any
option present on the left hand side. Right now when user click on
any link(OS packages,Option Two), the content is displayed in the
down to the options listed ass hown in the plnkr demo. Any
suggestions how to show the content on the right hand side when user
click on any of the option.
Firstly I wrapped your content in a wrapper div with a class contents-wrap then the sidebar-wrapper and contents-wrap can be set to 30% and 70% respectively, so that we get the desired result.
CSS:
.contents-wrap{
display:inline-block;
width:70%;
float:left;
}
.sidebar-wrap{
display:inline-block;
width:30%;
float:left;
}
And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
For this I suggest setting the respective variable to just true, instead of toggling the input.
Plunkr Demo
But here is a even better version, where you only use one variable toggle and you set the selected tab name to the toggle variable, using this method, the number of variables needed to be defined is reduced.
Plunkr Demo

Odoo-9, my widget doesn't work in QWeb view

I have made a widget in Odoo 9 for cutting product description in website view. Added widget="short_desc" to product form view and website product view. I mean something like that:
<span t-field="product.description"/> <!-- full description -->
<span t-field="product.description" t-field-options='{"widget": "short_desc"}'/> <!-- short description -->
<span t-field="product.description" widget="short_desc"/> <!-- also tried this syntax -->
I found helpful this answer: Odoo 9. How to override form widgets?, but it works only in product form and doesn't on website.
So, I have a widgets.js:
odoo.define('wsup.widgets', function (require) {
'use strict';
var core = require('web.core');
var FieldChar = core.form_widget_registry.get('char');
var ShortDescriptionView = FieldChar.extend({
render_value: function() {
console.log('hey, im working!');
this.$el.html('<span>Ok, widget really works</span>');
},
});
core.form_widget_registry.add('short_desc', ShortDescriptionView);
});
When I go to Sales -> Products and open any product, I can see "Ok, widget really works" instead of its description, but when I go to /shop page — product description still has no changes and nothing in JS console.
Here is part of my website product XML view (it works good at all, except short description part):
<div class="product-preview oe_website_sale">
<div class="product-preview__image">
<a t-attf-href="/shop/product/{{ item.id }}">
<span itemprop="image" t-field="item.image" t-field-options='{"widget": "image"}' t-att-alt="item.name"/>
</a>
</div>
<div class="product-preview__info text-center">
<div class="product-preview__info__title">
<h2><a t-attf-href="/shop/product/{{ item.id }}"><span t-field="item.name"/></a></h2>
</div>
<div class="product-preview__info__description">
<p><span t-field="item.description" t-field-options='{"widget": "short_desc"}'/></p>
</div>
</div>
</div>
Why it doesn't work on /shop page? What I forgot to do? Thank you.

As I understand your comment your requirement was to show small amount of description rather than showing a huge description. So, I think this requirement can be easily achieved without create a widget.
Suppose, you have this content as description:
Two is better than one.
Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to handle bass and mid-range sounds and a tweeter for high-frequency audio. These dedicated drivers help ensure accurate, detailed sound across the entire sonic spectrum. The result: you’re immersed in the music and hear details you never knew existed. Even when listening to an old favorite, you may feel like you’re hearing it for the first time.
And from this much description if you want to show small amount of description or number of words than you can simple use the below code.
<span t-if="product.website_description and len(product.website_description) > 500">
<t t-set="description" t-value="product.website_description[:500] and product.website_description[:500].replace('+', '\n')+'...'"/>
<p class="text-muted ">
<t t-raw="description"/>
</p>
</span>
In this above code, [:500] will be the number of words to be used.
Output will be:
Two is better than one.
Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to han...
Hope, this code will help you.
Thanks.

How do you make a picture appear onClick using javascript

here is the html
<div id="first_caption">
<p style="float: left; clear: left">
<a id="light_on" href="#" onclick="myClick()">
<img id="light_img" src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg" height="50" width="50">
</a>
How can you stay healthy and do more of the things you love? Click the light bulb to find out how.
</p><br><br><br>
</div>
<div id="heading1">
</div>
here is the javaScript
<script>
function myClick(){
text = "<b><i><br><br>You can save a ton of money by drinking tap or filtered water, instead of wasting hundreds of dollars on bottled water. Did you know the average person spends $100+ per person every year! The good thing is its not your fault; many people are inticed by clever advertising, and thinking it has neutrisional values that other water does not contain. The truth is Big companies like Nestle and Coca'cola are simply profiting off making you think youre making a healthy choice. Bottled water is only tested once a weak for contamination and germs, and is no better than your average tap water. Honestly, if you really wanted to make a healthier decision try filtered water. You could argue that you still have a water bill dont you? well, according to STATISTIC BRAIN,'the total cost of a monthly water bill if tap cost as much as the cheapest watter bottle would be $9000!' </i></b>";
document.getElementById('heading1').innerHTML = document.getElementById('heading1').innerHTML + text;
document.getElementById("heading1").style.textAlign="left";
document.getElementById("heading1").style.marginLeft="20px";
}
</script>
Basically after i click the light bulb some text appears below the picture. I would like to know using the same method how can i make a picture appear instead.

Change the "text" content, and do not append it, just overwrite:
<script>
function myClick(){
text = "<img src='http://www.online-image-editor.com/styles/2013/images/example_image.png'";
document.getElementById('heading1').innerHTML = text;
}
</script>

You can create an img element in the html with style="display: none;" and then get this element and set the new style with display: block; inside myClick() function

You could add the image to your HTML code and set display property to none and then change it with javascript.
HTML
<div id="first_caption">
<p style="float: left; clear: left">
<a id="light_on" href="#" onclick="myClick()">
<img id="light_img" src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg" height="50" width="50" />
</a>
How can you stay healthy and do more of the things you love? Click the light bulb to find out how.
</p><br><br><br>
</div>
<div id="heading1">
<img id="myNewImage" src="" /> <!-- your new image -->
</div>
CSS
#myNewImage { display:none; }
Javascript
function myClick() {
document.getElementById("myNewImage").style.display = "block";
}

How come the hyperlink doesn't work on part of my div?

http://geodit.com:8000/
If you try to click between "Spear St. Oakland" and the description, you'll notice that the anchor takes you nowhere. That's because there's a padding between them.
How do I get the hyperlink to work when the user clicks between the text?

Try putting the padding on the a element(s), instead of the div elements.

Your code is unnecessarily complex. For example you don't need to wrap everything (such as each link) in a DIV (or the other way round). Just style the link directly, possibly setting it's display style to block so that it behaves like a div.
If you merge both links into one then your problem will go away and you wouldn't need to "fake" the links with cursor: pointer.
Here an example how simple your HTML could be:
<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt">
<a href="/d/1339" class="trans_caption ">
See the sun whispering the light of our days from last summer...
</a>
<div class="trans_caption_over">
<img src="/media/img/brightmix/star.png"> Great Find!
<a href="/d/1339" class="extras">
<em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto"> Spear St. Oakland, 94107</em>
<span>Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
</a>
</div>
<div class="title_text_only">
See the sun whispering the light of our days from last summer...
</div>
<div class="desc_text_only">
Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &amp;quot;cream ...
</div>
</div>

You do not have a link between the text. You have TWO links.
What is confusing is the
.grid_doc_holder {
cursor: pointer;
text-align: center;
}
which shows the hand when you are not over the links too
You could consider making the outer container clickable

I believe you want to just put your div(or Divs) within an A tag, that will make it all clickable.