1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Table rows toggle with subcategories

Discussion in 'jQuery' started by UrukMorg, Feb 5, 2020.

0
  1. #1
    Hi everyone,

    I have a very simple issue that I can't solve (I'm new in jQuerry).

    So I have a simple menu structure:
    Sport => Country => League/League

    Football
    >Club matches
    >>Champions League
    >>Europa League
    >England
    >>1.England
    >>2.England
    >France
    >>1.France
    Tennis
    >ATP
    >>Australian Open
    >>Roland Garros
    >WTA
    >>US Open
    >>Wimbledon
    >ITF
    >>Bucharest

    I want this to be collapse on Sport level, then after expanding I should see another level, so in Footbal: Club matches/England/France then each subcategory can be also expanded. just to see leagues in each of them.

    I have a jQuery script:
    jQuery(document).ready(function() {
    jQuery('.breakrow').click(function() {
    $(this).nextUntil('tr.breakrow').slideToggle(200);
    });
    });

    Which does the trick, but only for one level of the menu.

    I saved in here https://jsfiddle.net/qxpk5rf8/1/

    Please if anyone knows how to solve it let me know.
     
    UrukMorg, Feb 5, 2020 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    What's a mess. Is this what you want?
    
<html><head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        td{display:block;}
        .breakrow{cursor:pointer;}
        .breakrow1{display:none;font-size:90%;}
        .breakrow2{display:none;font-size:80%;}
    </style>
</head></body>
<table>
    <tbody>
        <tr>
            <td class="breakrow">
                <b>Recommended</b>
            </td>   
            <td class="breakrow1">
                >Champions League
            </td>
            <td class="breakrow1">
                >Europa League
            </td>
        </tr>           
        <tr>
            <td class="breakrow">
                <b>Football</b>
            </td>
            <td class="breakrow1">
                Club matches
            </td>
            <td class="breakrow2">
                >>Champions League
            </td>
            <td class="breakrow2">
                >>Europa League
            </td>
            <td class="breakrow1">
                >England
            </td>
            <td class="breakrow2">
                >>1.England
            </td>
            <td class="breakrow2">
                >>2.England
            </td>
            <td class="breakrow1">
                >France
            </td>
            <td class="breakrow2">
                >>1.France
            </td>
        </tr>   
        <tr>
            <td class="breakrow">
                <b>Tennis</b>
            </td>
            <td class="breakrow1">
                >ATP
            </td>
            <td class="breakrow2">
                >>Australian Open
            </td>
            <td class="breakrow2">
                >>Roland Garros
            </td>
            <td class="breakrow1">
                >WTA
            </td>
            <td class="breakrow2">
                >>US Open
            </td>
            <td class="breakrow2">
                >>Wimbledon
            </td>
            <td class="breakrow1">
                >ITF
            </td>
            <td class="breakrow2">
                >>Bucharest
            </td>
        </tr>
    </tbody>
</table>
  <script>
    $(document).ready(function() {
        $("td.breakrow").on("click",function(){
            $(this).nextUntil('td.breakrow').slideToggle(200);
        });
    });
  </script>
</body></html>
    Code (markup):
     
    ketting00, Feb 5, 2020 IP
  3. UrukMorg

    UrukMorg Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Yeah :( appologies for the mess.

    Well closeby but:
    1. Club matches/England and France also need to toggle the leagues in their category.

    I tried this, but then when You play with collapsing and expanding it causes weird behavior - something is missing

    $(document).ready(function() {
        $("td.breakrow").on("click",function(){
            $(this).nextUntil('td.breakrow').slideToggle(200);
        });
        $("td.breakrow1").on("click",function(){
            $(this).nextUntil('td.breakrow1').slideToggle(200);
        });
    });
    Code (JavaScript):
     
    UrukMorg, Feb 6, 2020 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    I think that's because of CSS behavior. You wouldn't achieve what you want with the layout structure like that. Unfortunately, I'm not excel with CSS and HTML.

    There's a guy called @deathshadow hiding somewhere in this place. Go find him. If you're lucky he would come and help you out. (I'm into a John Wick 3 movie, LOL );)
     
    ketting00, Feb 6, 2020 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1) what the blue blazes makes this tabular data? Big tip, if there's only one column, it is NOT tabular data and TABLE is completely the wrong HTML. Semantics, try it some time.

    2) What the blue blazes in 2020 makes this any of JavaScript's flipping business, much less the train wreck of developer ignorance, ineptitude, and incompetence that is jQuery. Kick that mind-numbingly dumbass BS to the curb.

    3) Why are you pissing all over the markup with endless pointless classes for nothing and style=""? Much less the use of the BOLD tag when these are headings or summaries, NOT legal entities. (aka grammatically bold, what the <b> tag is FOR!)

    The really sad part being HTML can now do this without even needing to play JavaScript trickery.

    
<div class="detailGroup"><!-- use a class to describe WHAT these all are! -->
	<details>
		<summary>Recommended</summary>
		<ul>
			<li>Champions League</li>
			<li>Europa League</li>
		</ul>
	</details><details>
		<summary>Football</summary>
		<ul>
			<li>
				<details>
					<summary>Club matches</summary>
					<ul>
						<li>Champions League</li>
						<li>Europa League</li>
					</ul>
				</details>
			</li><li>
				<details>
					<summary>England</summary>
					<ul>
						<li>1. England</li>
						<li>2. England</li>
					</ul>
				</details>
			</li><li>
				<details>
					<summary>France</summary>
					<ul>
						<li>1. France</li>
					</ul>
				</details>
			</li>
		</ul>
	</details><details>
		<summary>Tennis</summary>
		<ul>
			<li>
				<details>
					<summary>ATP</summary>
					<ul>
						<li>Australian Open</li>
						<li>Roland Garros</li>
					</ul>
				</details>
			</li><li>
				<details>
					<summary>WTA</summary>
					<ul>
						<li>US Open</li>
						<li>Wimbledon</li>
					<ul>
				</details>
			</li><li>
				<details>
					<summary>ITF</summary>
					<ul>
						<li>Bucharest</li>
					</ul>
				</details>
			</li>
		</ul>
	</details>
<!-- .detailGroup --></div>
    Code (markup):
    Sadly that doesn't work in IE or Edge (any version, well, at least until Edge becomes Chrome)

    I don't have time right now to do a recode for the way that works back to IE9, but it involves putting in hidden INPUT checkboxes and using the adjacent sibling selector with :checked in the CSS. Again, NOT JavaScript's job. Or tabular data... or anything else you did there.
     
    deathshadow, Feb 6, 2020 IP