Click Function for Tabs

Solved
meaghanpsavage ・

Jan 29th, 2023 02:41 PM

I'm trying to create multiple tabs that display different text upon user click but I can't seem to get the different displays with the click function to work. Any recommendations?

<!-- Tabs -->
<div class="tab-interface flex flex-wrap justify-center -mb-px" id = "display-tabs" role="tablist" aria-label="Sample Tabs">
<span role="tab" class="mr-2 inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" aria-selected="false" aria-controls="panel-1" id="tab-1" tabindex="0"> tab 1 </span>
<span role="tab" class="mr-2 inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" aria-selected="false" aria-controls="panel-1" id="tab-2" tabindex="0"> tab 2 </span>

<!-- Tab Content -->
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Tab 1</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
<p>Tab 2</p>
</div>
</div>
					
<!-- Click function for tabs -->
<script>
$("#display-tabs").click(function(){  
	$("#display-tabs").attr("aria-selected","false"); //deselect all the tabs 
	alert( "Tab selected" );
	$(this).attr("aria-selected","true");  // select this tab
});
</script>
bobbyiliev ・

Jan 30th, 2023 01:04 AM

・

Best Answer

Hi there,

As far as I can see you are trying to use JQuery and if the functionality is not working, then it is most likely that you've not included the JQuery library.

What I could suggest instead is to use Alpine.js, here is a quick example:

<div class="tab-wrapper" x-data="{ activeTab:  0 }">
  <div class="flex">
    <label
      @click="activeTab = 0"
      class="tab-control"
      :class="{ 'active': activeTab === 0 }"
    >Tab 1</label>
    <label
      @click="activeTab = 1"
      class="tab-control"
      :class="{ 'active': activeTab === 1 }"
    >Tab 2</label>
    <label
      @click="activeTab = 2"
      class="tab-control"
      :class="{ 'active': activeTab === 2 }"
    >Tab 3</label>
  </div>

  <div class="tab-panel" :class="{ 'active': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0">
    <p>This is the example content of the first tab.</p>
  </div>
  <div class="tab-panel" :class="{ 'active': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1">
    <p>The second tab’s example content.</p>
  </div>
  <div class="tab-panel" :class="{ 'active': activeTab === 2 }" x-show.transition.in.opacity.duration.600="activeTab === 2">
    <p>The content of the third and final tab in this set.</p>
  </div>
</div>

Hope that this helps!

Best.

Bobby

Report
1
meaghanpsavage ・

Jan 30th, 2023 03:55 PM

Yes, thank you! That works!

Report
1
bobbyiliev ・

Jan 31st, 2023 01:33 AM

No problem at all! Happy to hear that it works!

meaghanpsavage ・

Jan 31st, 2023 03:56 PM

Is it possible to use the @click functionality to execute a specific javascript function if it is clicked? I tried using this with a function and it runs but it only runs when the page is initially loaded not every time it is clicked.

<div class="tab-wrapper" x-data="{ activeTab:  0 }">
  <div class="flex">
    <label
      @click="activeTab = 0"
      @click="javascript:testprint()"
      class="tab-control"
      :class="{ 'active': activeTab === 0 }"
    >Tab 1</label>
    <label
  </div>

<script type="text/javascript">
	function testprint(){
		alert("Test alert on click")
}
</script>
bobbyiliev ・

Feb 2nd, 2023 12:15 AM

Yep, you can just use plain JS with onclick="testprint()" rather than @click="javascript:testprint()", eg:

<div class="tab-wrapper" x-data="{ activeTab:  0 }">
  <div class="flex">
    <label
      @click="activeTab = 0"
      onclick="testprint()"
      class="tab-control"
      :class="{ 'active': activeTab === 0 }"
    >Tab 1</label>
    <label
  </div>

<script type="text/javascript">
	function testprint(){
		alert("Test alert on click")
}
</script>

Hope that this helps!