LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
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 02-13-2019, 07:19 PM   #1
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,140

Rep: Reputation: 50
Is it possible in html/css to make a tag active or inactive?


For example is it possible at all to make the following line
Code:
<li><h3>Some text</h3></li>
render like:
Code:
<li>Some text</li>
or
Code:
<h3>Some text</h3>
at the click of a mouse or onmouseover?

Thank you for your help.

Last edited by rblampain; 02-13-2019 at 07:55 PM.
 
Old 02-13-2019, 07:32 PM   #2
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: Slackware
Posts: 8,800

Rep: Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758Reputation: 3758
Yes. You add an event handler and put some DOM manipulation code in it.
 
2 members found this post helpful.
Old 02-13-2019, 07:36 PM   #3
hydrurga
LQ Guru
 
Registered: Nov 2008
Location: Pictland
Distribution: Linux Mint 19.1 MATE
Posts: 7,906
Blog Entries: 5

Rep: Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821Reputation: 2821
If you use Javascript/JQuery, yes.

https://www.digitalocean.com/communi...ion-to-the-dom

https://stackoverflow.com/questions/...s-using-jquery

Also, for CSS hacks, see here:

https://tympanus.net/codrops/2012/12...-click-events/

and https://stackoverflow.com/questions/...-effect-in-css

Disclaimer: I haven't done any web development for a while so html5/css may well support clicks now and I just don't know about it.
 
2 members found this post helpful.
Old 02-13-2019, 09:00 PM   #4
michaelk
Moderator
 
Registered: Aug 2002
Posts: 18,482

Rep: Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657Reputation: 2657
Mouse over should be doable using CSS :hover selector.

https://www.w3schools.com/cssref/sel_hover.asp
 
2 members found this post helpful.
Old 02-14-2019, 01:33 PM   #5
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 11,499
Blog Entries: 8

Rep: Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016Reputation: 3016
it should be possible with CSS only, no javascript required.
the :hover selector is almost trivial, but it can also be achieved for mouseclicks... been a while since i coded a clickable menu hamburger which isn't too far from what you want...
 
3 members found this post helpful.
Old 02-14-2019, 01:49 PM   #6
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 3,914
Blog Entries: 3

Rep: Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862Reputation: 1862
CSS all the way. JS is not a good idea for this, or for much else.

The :hover selector, as mentioned already, is what you want. There are also ways to deal with clicks though that is a bit of a hack. Here is one example:

https://www.w3.org/Style/Examples/007/folding.en.html

and another

https://alligator.io/css/collapsible/

I think to get what you want you'll have to combine pieces from two or three methods.
 
2 members found this post helpful.
Old 02-15-2019, 04:45 AM   #7
Samsonite2010
Member
 
Registered: Apr 2015
Distribution: Ubuntu
Posts: 140
Blog Entries: 1

Rep: Reputation: 65
Maybe experiment with both CSS and Javascript. I prefer not to use JS if I can, but then again, if you are using any Javascript at all, no harm in exploring. There are plenty of nice UI libraries too for inspiration or actual use.
 
1 members found this post helpful.
  


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
HTML5 "<details>" tag display:inline, display:hidden CSS ignored (Firefox, Seamonkey) ShellyCat Programming 1 01-11-2011 10:23 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
Need assistance with shell script - replace a string with a start tag and end tag SupermanInNY Programming 18 01-02-2010 05:44 PM
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 06:23 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