I am trying to make a text collapsible when I press the word 'Abstract' in my webpage, https://rubencioak.github.io/research.html, I thought the following code was going to be enough:
<ol class="lead">
<li> <p> <b>Free-riding in Collective Agreements,a Search and Matching Model of Minimum Wages</b>
<br />
<span id="abstract-link" class="abstract-click">Abstract</span>
<p class="abstract-text" style="display:none; font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</p> </li> </ol>
I am using a templeate from HTML5 and also looking at this webpage: https://messertodd.github.io/research.html. for reference.
Now, although I thought it was basically the same, something is obviously wrong with this code.
All in all, the question is: is there a simple way to make my text under the word abstrac collapsible?
Any help would be much appreciated.
KR
You can use <details> and <summary> tags:
<details>
<summary>Abstract</summary>
<p class="abstract-text" style="font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</details>
Related
I need to grab contact details of people that appears pretty much in the same bit of code after the words:
"For further information, please contact:"
So I want the href (http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng)
and the name (Hock Keng)
Tried variations of //strong[contains(., 'For further')]/following-sibling::p
but not working
Code:
<p><span style="font-size:14px;"><span data-mce-style="font-size: small;"><strong>For further information, please contact:</strong></span></span></p>
<p> </p>
<p><span style="font-size:14px;"><span data-mce-style="font-size: small;"><strong><a data-mce-href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" target="_blank">Hock Keng</a></strong><strong><a data-mce-href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" target="_blank"> </a></strong><strong><a data-mce-href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" href="http://www.wongpartnership.com/index.php/wongpartnership/partner/chan-hock-keng" target="_blank">Chan</a></strong><strong>, Partner, WongPartnership</strong></span></span></p>
I've searched online for the answer to this question and I know it is possible to do this, but I just can't figure it out with what's out there.
Background: I'm creating a frequently asked questions segment where one can click the question and be directed to the answer on the same page. I also have the questions split into categories.
Although I have been able to achieve this with basic href concepts, I would like for the answer to the question to be displayed on the middle of the page and not right below of the margin of the top of the page once the user clicks the questions that's anchored.
Hopefully, I was able to paint a somewhat picture of what I mean. Now, I will show you what I have in terms of syntax.
I definitely do believe there are multiple ways in which I could've created the code using style, class, or other attributes, but I don't hold a strong coding background :(. Therefore, I went with what I was able to pick up from W3School stuff XD.
If someone can help me out, I'd very much appreciate it since it'd make the FAQ section a lot cooler to use.
Here are images explaining the scenario a little better as well.
Question Section
Answer Section
<p>
<strong>Color Questions</strong>
<br/>
What is the door's color?
<br />
What is the window's color?
</p>
<p>
<strong>Shape Questions</strong>
<br/>
What is the shape of a ball?
<br/>
What is the shape of a box?
</p>
<h3>Answers</h3>
<p>
<strong>Color Questions</strong>
</p>
<p>
<strong>
<a id="A"></a>What is the door's color?
</strong>
<br />The door's color is blue.
</p>
<p>
<strong>
<a id="B"></a>What is the window's color?</strong>
<br />The windows's color is red.
</p>
<p>
<strong>
Shape Questions</strong>
</p>
<p>
<strong>
<a id="C"></a>What is the shape of a ball?
</strong>
<br />A ball has the shape of a sphere.
</p>
<p>
<strong>
<a id="D"></a>What is the shape of a box?
</strong>
<br />A box has the shape of a cube.
</p>
if you want to put your text in middle you can use <center>and put your text in this tag but it is obsolete right now,there are better methods to do this.you can use margin and paddingand set your text in great position also you can use position.check the w3schools.com for more details.its helpful.
Hi have the code where i whrite the code inside the Text area to get the format like below.But my problem is the text is format correctly and how i can place the same text format inside the textarea.
<input type="textarea">
<P align = center>
<B>About Salman Khan </B>
</P>
<P align = left>Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</input>
Sorry, you can't style a textarea. However it does seem like there are some workarounds available. Here's the first thing I found:
Format text in a <textarea>?
So basically you put all your content in a div and style it to make it work like a text area. Here you can see I've made it scrollable, made it editable, plus setting the height/width and borders. (There don't need to be set, depending on exactly what you want.) I think the biggest problem here is that different browsers style text areas differently so there probably is no really easy to way style it so it looks exactly like a native textarea in all browsers.
<div id='fake_textarea' style="overflow:scroll; height:100px; width:400px; border:solid; border-width:1px" contenteditable>
<P align=center>
<B>About Salman Khan </B>
</P>
<P align=left>
Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</div>
Notice that this the same as your code, except I replaced the input tag with a styled div.
See the posts in the above answer if you need to be use this field in a form and must submit the contents. It takes a minor work around.
Hi I have a page that I am working on, which takes articles from a database. the results are split using php and show six articles per page. The problem i have is that if there are seven results and we roll into page 2, then everything thing is fine as can be seen under the timepieces menu button.
If however there are less than 6 articles and only one page the first article goes funny and the text drops below the image as can be seen under the private aviation button.
A link to the website is here : http://goo.gl/N8p8CT
Both items appear to be within the article.row.mid and so i am struggling to work out why.
Cause first article has image wrapped into <a></a> tag, but second article hasn't, these two images are rendered by different css rules.
and
first one is styled by botstrap.css rules, 2-nd is by your own stylesheet.
Anyway if you use bootstrap, then it's better to wrap image of article into a div for better alignment using bootstrap grid.
I'd do:
<article class="row mid">
<div class="col-xs-4">
<a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
<img src="admin/images/private_jet_hanger-1413201025.jpg" alt="post1" height="250px" width="250px">
</a>
</div>
<div class="col-xs-8 info"><a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
</a><h1>Jet Partner launches empty leg service...</h1>
<p class="details"></p>
<p class="tags"></p>
<p class="text">
</p><p>The advantages associated with private jet travel are invaluable: the ability to journey in comfort, security and privacy; to arrive at the airport just 15 minutes before take-off and to completely avoid check-in. Now, the advent of groundbreaking </p>
Read More <ul class="counters list-inline">
</ul>
</div>
</article>
Hi I'm sure there is a simple way of doing this but I just can't find what im looking for.
my problem is I have an ordered list code shown below.
<ol>
<li>Identification code of product type </li>
<b> WC flushing cistern - Class 2</b>
<li> Serial number allowing identification of the construction product as required under article 11(4): </li>
<b> PACWHB313397</b>
<li>Intended use in accordance with the applicable harmonised standard, as foreseen by the manufacturer </li>
<b>Personal Hygiene</b>
<li>Name, and contact address of manufacturer as required under article 11(5): </li>
<b> Thomas Dudley Limited, 295 Birmingham New Road, Dudley, West Midlands, United Kingdom, DY1 4SJ </b>
<li>Where applicable, Name and contact details of representative who's mandate covers tasks specified in article 12(2):</li>
<b>N/A</b>
<li>System or Systems of assessment and verification of constancy of performance of the construction product as set out in CPR, annex V:</li>
<b> System 4</b>
<li>Applicable Standards, In case of the declaration of performance concerning a construction product covered by a harmonised standard</li>
<b>BS EN 14055:2010 WC and Urinal Flushing Cisterns (Class 2)</b>
<b>BS 6920-2.1:2000 Suitability of non-metallic products for use in contact with water intended for human consumption.</b>
<b>BS 1212-3:1990 Diaphragm type float operated valves (plastic bodied) for cold water services only (Excluding Floats)</b>
</ol>
Now in firefox it displays correctly for example it should look like this
example example
bold text here
example example
bold text here
example example
bold text here
Which is working ok in all browser accept IE 10 it displays like this
example example bold text here
example example bold text here
example example bold text here
So I was just wondering is there a simple way of sorting this out using css or a certain tag to use to sort this out.
Any help will be much appreciated.
Take a look at this fiddle http://jsfiddle.net/Lcy2L/
You can only have <li> elements inside the element. You should put all your content in the <li> and insert <br /> and <b> or other tags to format your content inside the <li>.
Your code could look something like this
<ol>
<li>
Content<br />
<b>Comment</b>
</li>
</ol>
You can see this fiddle, contains example of what you can do. with CSS:
.styling {
font-weight:bold;
}
and li element:
<li>Identification code of product type
<br><span class="styling"> WC flushing cistern - Class 2</span>
</li>