Developer and Analyst

Eduardo Fuerte

<div>
Hi Chris 
 
So did I, but I had no effects when a card is clicked. 
 

<pre><code class="code-1 nolinks" id="code-20-43089015-1">&lt;style&gt;

.card { margin: 15px; }

.card.clicked {
 background-color: green;
}

&lt;/style&gt;
</code></pre>
 

<pre><code class="code-10 nolinks" id="code-20-43089015-2">&lt;script&gt;

	$('.card').click(function() {

		$('.card').removeClass('clicked'); // remove it from all other cards
		$(this).addClass('clicked');
		
		
		$('#CampaignID').val( $(this).data('campaignid') )
	})
	
 
&lt;/script&gt;
</code></pre>
</div>

<div>
Hey Eduardo, 
 
Usually, when writing jQuery code (or any javascript code for that matter) we need to defer to firing of it until all the elements are loaded. In jQuery, we ddo this by wrapping it in a DOM Ready function, so just edit your code to do that: 
 

<pre><code class="code-10 nolinks" id="code-20-43089022-1">&lt;script&gt;
$(function() {

 $('.card').click(function() {
 $('.card').removeClass('clicked'); // remove it from all other cards
 $(this).addClass('clicked');

 $('#CampaignID').val( $(this).data('campaignid') )
 });

});
&lt;/script&gt;
</code></pre>
I suspect that will solve your problem.
</div>

<div>
Hi Chris 
 
So did I, but still not running. 
 
Maybe something else is preventing it to run. 
 
The cards: 
 

<pre><code class="code-10 nolinks" id="code-20-43089043-1"> &lt;div class=&quot;row no-gutters&quot;&gt;
 	@foreach ($campaigns as $campaign) 
 	&lt;div class=&quot;col-3&quot;&gt;
 		&lt;div class=&quot;card bg-light&quot; data-campaignid=&quot;{{ $campaign-&gt;CampaignID }}&quot;&gt;
 			&lt;img src=&quot;/img/img_logo.png&quot; class=&quot;img-fluid img-responsive&quot;&gt;
 			&lt;h5 class=&quot;card-title&quot;&gt;{{ $campaign-&gt;CampaignID }} {{ $campaign-&gt;CampaignName }}&lt;/h5&gt;
 		&lt;/div&gt;
 	&lt;/div&gt;
 	@endforeach
 &lt;/div&gt;
</code></pre>
</div>

<div>
Ahh right. You have the bg-light class on your card, which is a BootStrap class to change the background colour. That style rule is tagged with !important, so it's overriding your .clicked class. 
 
You have a few options. You can remove the bg-light class from your card: 
 
&lt;div class=&quot;card&quot; ... 
 
You can set your own rule to be important: 
 
.card.clicked { background-color: green !important; } 
 
Or you can choose to style something within the card instead of the card itself: 
 
&lt;div class=&quot;card bg-light&quot;&gt; 
&nbsp; &nbsp; &lt;div class=&quot;wrapper&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h5&gt;This is a card&lt;/h5&gt; 
&nbsp; &nbsp; &lt;/div&gt; 
&lt;/div&gt; 
 
.card.clicked .wrapper { background-color: green; } 
 
Any one of those solution will work, but they all have their pros and cons.
</div>

<div>
Just &nbsp;removing bg-light class make it runs!
</div>

<div>
Chris 
 
Thank you for the help!
</div>

<div>
No worries Eduardo. Glad you got it sorted :)
</div>

<div>
<div class="content wysiwyg-content">
Hi Experts 
 
 
Could you point how to obtain an effect of choosed at a bootstrap card ? 
 
Accordingly with: 
 
<a href="https://filedb.experts-exchange.com/incoming/2020/05_w21/1458094/Img_EE_002_19052020.png" target="_blank" title="img002 (16 KB)"><img alt="img002" class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2020/05_w21/800_1458094/Img_EE_002_19052020.png" /></a> 
What I need is when a card is clicked its bottom part changes color and if possible a &quot;check&quot; symbol is presented. 
 
Then a button at bottom left side is clicked to continues the process. 
(I guess this is a Bottstrap button also) 
 
Thanks in advance.
</div>
</div>

Img_EE_002_19052020.png

Hi Experts


Could you point how to obtain an effect of choosed at a bootstrap card ?

Accordingly with:



What I need is when a card is clicked its bottom part changes color and if possible a "check" symbol is presented.

Then a button at bottom left side is clicked to continues the process.
(I guess this is a Bottstrap button also)

Thanks in advance.

Could you point how to obtain an effect of choosed at a bootstrap card ?

Laravel is a free, open-source PHP web application framework for the development of web applications following the model–view–controller (MVC) architectural pattern. Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar. Laravel is regarded as one of the most popular PHP frameworks.

Laravel

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Bootstrap

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.