LinuxQuestions.org
Download your favorite Linux distribution at LQ ISO.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 08-08-2019, 06:50 AM   #1
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,149

Rep: Reputation: 51
html/css display


In html/css (no Javascript) is it possible - and how - to make a linked part of an html document visible only when clicking the link?

Thank you for your help.
 
Old 08-08-2019, 08:24 AM   #2
teckk
Senior Member
 
Registered: Oct 2004
Distribution: FreeBSD Arch
Posts: 2,241

Rep: Reputation: 474Reputation: 474Reputation: 474Reputation: 474Reputation: 474
Quote:
In html/css (no Javascript) is it possible
Is what possible?
Quote:
to make a linked part of an html document visible only when clicking the link?
Code:
<dt><a href="http://www.linuxquestions.org/questions" >LinuxQuestions</a>
 
1 members found this post helpful.
Old 08-08-2019, 09:32 AM   #3
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 4,053
Blog Entries: 3

Rep: Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952
You can hide or expose part of the document using the summary and details elements.

See
https://www.w3.org/TR/html5/
and
https://html.spec.whatwg.org/multipa...ctive-elements

If that's not what you were trying to do, please give some more information about your goal.
 
1 members found this post helpful.
Old 08-08-2019, 10:31 AM   #4
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,149

Original Poster
Rep: Reputation: 51
Thank you for the answers, it looks like my post is not clear.
In the example below, I am hoping to make paragrah4 only visible when its link in paragraph 2 is clicked.
As it is, paragraph4 is displayed on the screen by scrolling down from the top of the window with the browser.
In other words, I am hoping to see only paragraph 1, paragraph 2, paragraph 3 and paragraph 5 when scrolling from the top of the window but see paragraph4 when its link in paragraph 2 is activated.
The <p> tag is not essential.
I guess it is probably not possible with CSS and I have to make paragraph4 a file external to this HTML document.

Code:
<html><body>
<p>paragraph 1...</p>

<p>paragraph 2...
<a href="#paragraph4">See paragraph 4</a>
...</p>

<p>paragraph 3...</p>

<p id="paragraph4">This is paragraph 4</p>

<p>paragraph 5...</p>
</body></html>
 
Old 08-08-2019, 11:22 AM   #5
Sefyir
Member
 
Registered: Mar 2015
Distribution: Linux Mint
Posts: 593

Rep: Reputation: 288Reputation: 288Reputation: 288
Probably with some javascript

https://stackoverflow.com/questions/...icked#16308830

Quote:
Use JQuery. You need to set-up a click event on your button which will toggle the visibility of your wizard div.
Code:
$('#btn').click(function() {
    $('#wizard').toggle();
});
 
Old 08-08-2019, 11:38 AM   #6
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 4,053
Blog Entries: 3

Rep: Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952Reputation: 1952
A pox on javascript. :P

There are several ways to do it in CSS. Here's one:

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS hide and unhide</title>
  <style type="text/css" media="screen">
    .example p#paragraph4 { display: none; }
    .example p:target#paragraph4 { display: block; }
  </style>
</head>
<body>

  <div class="example">
    <a href="#paragraph1">Link 1</a>
    <p id="paragraph1">
      paragraph 1...
    </p>

  <p id="paragraph2">paragraph 2...
    <a href="#paragraph4">See paragraph 4</a>
    ...
  </p>

  <p>paragraph 3...</p>

  <p id="paragraph4">This is paragraph 4</p>

  <p>paragraph 5...</p>

  </div>
</body>
</html>
There are also other relevant pseudo-classes like :hover and :active but they work within the same block element whereas :target seems to work even across different blocks.
 
4 members found this post helpful.
Old 08-08-2019, 01:13 PM   #7
bodqhrohro
Member
 
Registered: Apr 2018
Location: Ukraine
Distribution: Debian GNU/Linux 11
Posts: 37

Rep: Reputation: Disabled
Cool

This is the time for ancient magic!

Code:
<html>
<body>
<p>paragraph 1...</p>

<p>paragraph 2...
<a href="data:text/html,%3cp%3eThis%20is%20the%20paragraph%204%3c/p%3e" target="paragraph4">See paragraph 4</a>
...</p>

<p>paragraph 3...</p>

<iframe name="paragraph4"></iframe>

<p>paragraph 5...</p>
</body>
</html>
No need in JS, no need in external files.
 
2 members found this post helpful.
Old 08-08-2019, 01:18 PM   #8
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: Slackware
Posts: 9,030

Rep: Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899Reputation: 3899
The example here seems more than adaptable to what you're trying to do:

https://developer.mozilla.org/en-US/...eb/CSS/:target

That example doesn't use combinators, but I've seen many examples that do.

https://developer.mozilla.org/en-US/...iple_selectors

(Note: I'm actually looking into exactly this, right now, so thanks for starting this thread).

Last edited by dugan; 08-08-2019 at 01:22 PM.
 
4 members found this post helpful.
Old 08-09-2019, 09:01 AM   #9
Sefyir
Member
 
Registered: Mar 2015
Distribution: Linux Mint
Posts: 593

Rep: Reputation: 288Reputation: 288Reputation: 288
Quote:
In html/css (no Javascript) is it possible
Quote:
Probably with some javascript
Well this just goes to show I don't fully read posts when I'm tired. Sorry about that
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: Y'know CSS was to kill off HTML table layout? Well, second time's a charm: Meet CSS Grid LXer Syndicated Linux News 0 04-01-2017 07:03 PM
LXer: GTK+ 3.20 to Feature Massive CSS Changes, Port Most Widgets to CSS Nodes LXer Syndicated Linux News 0 11-22-2015 06:30 PM
LXer: Making GTK3 themes – Part 2: The gtk.css and gtk-widgets.css file LXer Syndicated Linux News 0 07-24-2012 01:50 PM
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 11:20 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration