Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by garethtnash
at 2024-08-12 08:14:37
ModifyPoint:500 Replies:15 POST_ID:828736USER_ID:11641
Topic:
jQuery;JavaScript;Cascading Style Sheets (CSS)
Hello,
I have a standard unordered list with a UL showing the first 5 items, followed by an item Show More.
What I would like to do, is when Show More is clicked, show the remaining list items, but hide the 'Show More' list item --
I have a standard unordered list with a UL showing the first 5 items, followed by an item Show More.
What I would like to do, is when Show More is clicked, show the remaining list items, but hide the 'Show More' list item --
<ul id="list1"><li>Value 1</li><li>Value 2</li><li>Value 3</li><li>Value 4</li><li>Value 5</li><li><a href="#" onclick="doSomething">View More</a></li><li style="display:none;">Value 6</li><li style="display:none;">Value 7</li><li style="display:none;">Value 8</li><li style="display:none;">Value 9</li><li style="display:none;">Value 10</li></ul> 1:2:3:4:5:6:7:8:9:10:11:12:13:
Is this possible?
Cheers
Expert: _alias99 replied at 2024-08-17 02:16:58
Splitting points per author's comment:
<< Sorry got a bit trigger happy there awarding points, meant to award to each, >>
_alias99
Community Support Moderator
<< Sorry got a bit trigger happy there awarding points, meant to award to each, >>
_alias99
Community Support Moderator
Author: garethtnash replied at 2024-08-13 12:52:35
Actually, that is a very good point thanks Chris
Expert: Chris Stanyon replied at 2024-08-13 02:35:16
@duncanb7 - FYI - You can't have a DIV as a child of a UL!
Expert: _alias99 replied at 2024-08-12 14:03:49
Splitting points per author's comment:
<< Sorry got a bit trigger happy there awarding points, meant to award to each, >>
_alias99
Community Support Moderator
<< Sorry got a bit trigger happy there awarding points, meant to award to each, >>
_alias99
Community Support Moderator
Author: garethtnash replied at 2024-08-12 13:18:30
Guys, I'm sorry I didn't mean to cause an issue, both of your solutions work, I can see that, they are both good. I just didn't really want to use too many ID attributes, for fear of duplicating and then not being w3c valid (I'm only human).
That aside both solutions work - thank you
That aside both solutions work - thank you
Expert: duncanb7 replied at 2024-08-12 09:18:29
In your code you have to create an additional div around LI entries - which can more effort / needs more logic, if the list entries are created dynamically.
that is why you are being triggered to do more improvement based on my post
RainerJ, if you think so from you last post & if you think creating <div> cannot be okay, I think author also doesn't say you can allow use $(elem).parent("li") or parent
It is first time I did objection from clicking "request attention" button that
I am not sure it is a way to do that in EE thread, please advise by any EE admin and moduator if you see this thread
EE moduator/Admin will decide this
Talk you later, have a nice day
Duncan
Expert: Rainer Jeschor replied at 2024-08-12 09:02:14
Hi,
my first post followed your initial question with just one UL.
Here is a modified version, updating the list items of the parent list only:
http://jsfiddle.net/EE_RainerJ/UZxNS/1/
Elem is just the parameter for "this" so that you can use the same function everywhere without having to modify the element name / jQuery selector.
(see the sample where I added an additional UL)
@duncanb7:
You are right about the first post, but it is always the decision of the questioner and second sometimes there are different ways to get the same result.
In your code you have to create an additional div around LI entries - which can be more effort / needs more logic, if the list entries are created dynamically.
HTH
Rainer
my first post followed your initial question with just one UL.
Here is a modified version, updating the list items of the parent list only:
http://jsfiddle.net/EE_RainerJ/UZxNS/1/
Elem is just the parameter for "this" so that you can use the same function everywhere without having to modify the element name / jQuery selector.
(see the sample where I added an additional UL)
@duncanb7:
You are right about the first post, but it is always the decision of the questioner and second sometimes there are different ways to get the same result.
In your code you have to create an additional div around LI entries - which can be more effort / needs more logic, if the list entries are created dynamically.
HTH
Rainer
Expert: duncanb7 replied at 2024-08-12 08:48:27
Dear garethtnash
my code is completed first and tested successfuly at my side and
met all your requirementin in this thread , and
my code also let or trigger others more easily to understand your question
by looking jquery hide and show() and also let others easily to improve my code
So at least I assisted this thread
Please advise kindly
Duncan
my code is completed first and tested successfuly at my side and
met all your requirementin in this thread , and
my code also let or trigger others more easily to understand your question
by looking jquery hide and show() and also let others easily to improve my code
So at least I assisted this thread
Please advise kindly
Duncan
Author: garethtnash replied at 2024-08-12 08:44:04
Sorry got a bit trigger happy there awarding points, meant to award to each,
Just looking at both codes, if I have other lists with hidden list items, how can I ensure only the list items that below to list1 are displayed?
I have 4 - 5 lists that need to give the option to expand the number of list items displayed..
Appreciate your input.
Thank you
Just looking at both codes, if I have other lists with hidden list items, how can I ensure only the list items that below to list1 are displayed?
I have 4 - 5 lists that need to give the option to expand the number of list items displayed..
Appreciate your input.
Thank you
Expert: duncanb7 replied at 2024-08-12 08:39:55
it is not ,
Just using jquery hide and show() and work around that will be okay
to do it in different way and add other function features on it in future
and my code is already done for you problem
Just using jquery hide and show() and work around that will be okay
to do it in different way and add other function features on it in future
and my code is already done for you problem
Author: garethtnash replied at 2024-08-12 08:35:35
Great -= thank you, just one question - elem?
Author: garethtnash replied at 2024-08-12 08:33:33
Hi thanks,
I need to be a little more specific when targeting, would -
I need to be a little more specific when targeting, would -
<script type="text/javascript">$(document).ready(function() {})function test(){$("#list1#container").show();$("#list1#show").hide();}</script> 1:2:3:4:5:6:7:8:
Also work?
Assisted Solution
Expert: Rainer Jeschor replied at 2024-08-12 08:32:52
250 points EXCELLENT
<ul id="list1"><li>Value 1</li><li>Value 2</li><li>Value 3</li><li>Value 4</li><li>Value 5</li><li><a href="#" onclick="javascript:doSomething(this);">View More</a></li><li style="display:none;">Value 6</li><li style="display:none;">Value 7</li><li style="display:none;">Value 8</li><li style="display:none;">Value 9</li><li style="display:none;">Value 10</li></ul> 1:2:3:4:5:6:7:8:9:10:11:12:13:
Script:
function doSomething(elem) { $("li").show(); $(elem).parent("li").hide();} 1:2:3:4:5:
HTH
Rainer
Expert: duncanb7 replied at 2024-08-12 08:32:29
it is final code
<script type="text/javascript">$(document).ready(function() {})function test(){$("#container").show();$("#show").hide();}</script><body><div><ul id="list1"><li>Value 1</li><li>Value 2</li><li>Value 3</li><li>Value 4</li><li>Value 5</li><li id="show" ><a href="#" onclick="test();">Show More</a></li><div style="display:none;" id="container"><li >Value 6</li><li >Value 7</li><li >Value 8</li><li >Value 9</li><li >Value 10</li></div></ul></div></body> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:
Accepted Solution
Expert: duncanb7 replied at 2024-08-12 08:26:48
250 points EXCELLENT
It works for the following code with your problem
<script type="text/javascript">$(document).ready(function() {})function test(){$("#container").show();$("#show").hide();}</script><body><div><ul id="list1"><li>Value 1</li><li>Value 2</li><li>Value 3</li><li>Value 4</li><li>Value 5</li><li id="show" ><a href="#" onclick="test();">Show More</a></li><div style="display:none;" id="container"><li >Value 6</li><li >Value 7</li><li >Value 8</li><li >Value 9</li><li >Value 10</li></div></ul></div></body> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:
